@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
@import "tailwindcss";

@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

/* Theme */
/* ---------------------------------------------------------- */

@theme static {
  --k-motion-duration-xs: 100ms;
  --k-motion-duration-sm: 150ms;
  --k-motion-duration-base: 200ms;
  --k-motion-duration-lg: 300ms;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 550;

  /* Shared tracking utilities. Each typography style assigns its own tracking;
     these names describe tightness, not universal font-size thresholds. */
  --tracking-*: initial;
  --tracking-base: 0em;
  --tracking-sm: -0.012em;
  --tracking-xs: -0.020em;
  --tracking-2xs: -0.024em;

  --leading-4xs: 0.96;
  --leading-3xs: 1;
  --leading-2xs: 1.13;
  --leading-xs: 1.33;
  --leading-sm: 1.4;
  --leading-base: 1.5;
  --leading-lg: 1.6;

  /* Replace Tailwind's default size scale with the three design-system groups. */
  --text-*: initial;

  /* Body — regular prose, UI and long-form headings (10–48px) */

  --text-2xs: 0.625rem;
  --text-2xs--font-weight: var(--font-weight-normal);
  --text-2xs--letter-spacing: var(--tracking-base);
  --text-2xs--line-height: var(--leading-base);

  --text-xs: 0.75rem;
  --text-xs--font-weight: var(--font-weight-normal);
  --text-xs--letter-spacing: var(--tracking-base);
  --text-xs--line-height: var(--leading-base);

  --text-sm: 0.875rem;
  --text-sm--font-weight: var(--font-weight-normal);
  --text-sm--letter-spacing: var(--tracking-base);
  --text-sm--line-height: var(--leading-base);

  --text-base: 1rem;
  --text-base--font-weight: var(--font-weight-normal);
  --text-base--letter-spacing: var(--tracking-sm);
  --text-base--line-height: var(--leading-base);

  --text-lg: 1.125rem;
  --text-lg--font-weight: var(--font-weight-normal);
  --text-lg--letter-spacing: var(--tracking-xs);
  --text-lg--line-height: var(--leading-base);

  --text-xl: 1.25rem;
  --text-xl--font-weight: var(--font-weight-normal);
  --text-xl--letter-spacing: var(--tracking-xs);
  --text-xl--line-height: var(--leading-xs);

  --text-2xl: 1.5rem;
  --text-2xl--font-weight: var(--font-weight-normal);
  --text-2xl--letter-spacing: var(--tracking-xs);
  --text-2xl--line-height: var(--leading-xs);

  --text-3xl: 1.75rem;
  --text-3xl--font-weight: var(--font-weight-normal);
  --text-3xl--letter-spacing: var(--tracking-xs);
  --text-3xl--line-height: var(--leading-2xs);

  --text-4xl: 3rem;
  --text-4xl--font-weight: var(--font-weight-normal);
  --text-4xl--letter-spacing: var(--tracking-2xs);
  --text-4xl--line-height: var(--leading-3xs);

  /* Subheading — emphasized supporting text (16–40px).
     Relaxed tracking: 16–18px uses -0.008em; 20–40px uses -0.016em.
     These style tokens intentionally differ from Body and Display tracking. */

  --text-subhead-base: 1rem;
  --text-subhead-base--font-weight: var(--font-weight-medium);
  --text-subhead-base--letter-spacing: -0.008em;
  --text-subhead-base--line-height: 1.55;

  --text-subhead-lg: 1.125rem;
  --text-subhead-lg--font-weight: var(--font-weight-medium);
  --text-subhead-lg--letter-spacing: -0.008em;
  --text-subhead-lg--line-height: var(--leading-sm);

  --text-subhead-xl: 1.25rem;
  --text-subhead-xl--font-weight: var(--font-weight-medium);
  --text-subhead-xl--letter-spacing: -0.016em;
  --text-subhead-xl--line-height: var(--leading-sm);

  --text-subhead-2xl: 1.5rem;
  --text-subhead-2xl--font-weight: var(--font-weight-medium);
  --text-subhead-2xl--letter-spacing: -0.016em;
  --text-subhead-2xl--line-height: var(--leading-sm);

  --text-subhead-3xl: 1.75rem;
  --text-subhead-3xl--font-weight: var(--font-weight-medium);
  --text-subhead-3xl--letter-spacing: -0.016em;
  --text-subhead-3xl--line-height: var(--leading-sm);

  --text-subhead-4xl: 2rem;
  --text-subhead-4xl--font-weight: var(--font-weight-medium);
  --text-subhead-4xl--letter-spacing: -0.016em;
  --text-subhead-4xl--line-height: 1.2;

  --text-subhead-5xl: 2.25rem;
  --text-subhead-5xl--font-weight: var(--font-weight-medium);
  --text-subhead-5xl--letter-spacing: -0.016em;
  --text-subhead-5xl--line-height: var(--leading-2xs);

  --text-subhead-6xl: 2.5rem;
  --text-subhead-6xl--font-weight: var(--font-weight-medium);
  --text-subhead-6xl--letter-spacing: -0.016em;
  --text-subhead-6xl--line-height: var(--leading-2xs);


  /* Display — hero and marketing typography (36–112px) */

  --text-display-base: 2.25rem;
  --text-display-base--font-weight: var(--font-weight-medium);
  --text-display-base--letter-spacing: var(--tracking-xs);
  --text-display-base--line-height: var(--leading-2xs);

  --text-display-lg: 2.5rem;
  --text-display-lg--font-weight: var(--font-weight-medium);
  --text-display-lg--letter-spacing: var(--tracking-xs);
  --text-display-lg--line-height: var(--leading-2xs);

  --text-display-xl: 3rem;
  --text-display-xl--font-weight: var(--font-weight-medium);
  --text-display-xl--letter-spacing: var(--tracking-2xs);
  --text-display-xl--line-height: var(--leading-3xs);

  --text-display-2xl: 4rem;
  --text-display-2xl--font-weight: var(--font-weight-medium);
  --text-display-2xl--letter-spacing: var(--tracking-2xs);
  --text-display-2xl--line-height: var(--leading-3xs);

  --text-display-3xl: 4.5rem;
  --text-display-3xl--font-weight: var(--font-weight-medium);
  --text-display-3xl--letter-spacing: var(--tracking-2xs);
  --text-display-3xl--line-height: var(--leading-4xs);

  --text-display-4xl: 5rem;
  --text-display-4xl--font-weight: var(--font-weight-medium);
  --text-display-4xl--letter-spacing: var(--tracking-2xs);
  --text-display-4xl--line-height: var(--leading-4xs);

  --text-display-5xl: 6rem;
  --text-display-5xl--font-weight: var(--font-weight-medium);
  --text-display-5xl--letter-spacing: var(--tracking-2xs);
  --text-display-5xl--line-height: var(--leading-4xs);

  --text-display-6xl: 7rem;
  --text-display-6xl--font-weight: var(--font-weight-medium);
  --text-display-6xl--letter-spacing: var(--tracking-2xs);
  --text-display-6xl--line-height: var(--leading-4xs);

  /* Spacing, shape and motion */
  --spacing: 0.25rem;
  --radius-badge: 4px;
  --radius-control: 6px;
  --radius-card: 12px;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Semantic color utilities resolve against the active theme. */
@theme inline {
  --color-canvas: var(--k-canvas);
  --color-surface: var(--k-surface);
  --color-ink: var(--k-ink);
  --color-focus: #0054F0;
  --color-muted: var(--k-muted);
  --color-muted-light: var(--k-muted-light);
  --color-line: var(--k-line);
  --color-line-strong: var(--k-line-strong);
  --color-control: var(--k-control-border);
  --color-action: var(--k-action);
  --color-on-action: var(--k-on-action);
}

/* Base */
/* ---------------------------------------------------------- */

@layer base {
  :root {
    font-size: 16px;
    color-scheme: light;
    --k-canvas: #fff;
    --k-surface: var(--color-neutral-100);
    --k-ink: var(--color-neutral-900);
    --k-muted: var(--color-neutral-600);
    --k-muted-light: var(--color-neutral-400);
    --k-line: var(--color-neutral-200);
    --k-line-strong: color-mix(in oklab, var(--color-neutral-400) 85%, var(--color-neutral-200));
    --k-control-border: var(--color-neutral-300);
    --k-action: var(--color-neutral-900);
    --k-on-action: #fff;
  }

  [data-theme="dark"] {
    color-scheme: dark;
    --k-canvas: var(--color-neutral-950);
    --k-surface: var(--color-neutral-800);
    --k-ink: var(--color-neutral-50);
    --k-muted: var(--color-neutral-400);
    --k-muted-light: var(--color-neutral-600);
    --k-line: var(--color-neutral-800);
    --k-line-strong: color-mix(in oklab, var(--color-neutral-500) 85%, var(--color-neutral-800));
    --k-control-border: var(--color-neutral-700);
    --k-action: var(--color-neutral-100);
    --k-on-action: var(--color-neutral-950);
  }

  body {
    @apply bg-canvas text-ink font-sans text-base antialiased;
    font-feature-settings: "cv01" on, "ss03" on, "zero" on;
  }

  :where(code, pre, kbd, samp) { font-family: var(--font-mono); }

  /* Keep the unfocused color blue too, so color transitions never start at currentColor. */
  :where(*) { outline-color: var(--color-focus); }
  :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
  ::selection { background: var(--k-ink); color: var(--k-canvas); }
  button:not(:disabled), summary { cursor: pointer; }
}

/* Typography — opt-in prose */
/* ---------------------------------------------------------- */

@layer components {
  /* Opt-in prose uses the Body group for paragraphs and long-form headings. */
  .k-prose {
    @apply text-base;
    line-height: var(--leading-lg);
    & > * + * { margin-block-start: 1.5em; }
    & :where(h1) { @apply text-4xl font-medium mb-10; }
    & :where(h2) { @apply text-3xl font-medium mb-8 mt-20; }
    & :where(h3) { @apply text-2xl font-medium mb-6 mt-16; }
    & :where(h4) { @apply text-lg font-medium mb-6 mt-16; }
    & :where(h1,h2,h3,h4) { text-wrap: balance; }
    & :where(strong,b) { @apply font-semibold; }
    & :where(a) { @apply underline underline-offset-2 hover:decoration-2; }
    & :where(ul, ol) {
      list-style-position: outside;
      padding-inline-start: calc(var(--spacing) * 6);
      margin-block-end: calc(var(--spacing) * 6);
    }
    & :where(ul) { list-style-type: disc; }
    & :where(ol) { list-style-type: decimal; }
    & :where(ul ul) { list-style-type: circle; }
    & :where(ul ul ul) { list-style-type: square; }
    & :where(li) {
      margin-block: 0;
      padding-inline-start: var(--spacing);
    }
    & :where(ul, ol) > :where(li + li) {
      margin-block-start: calc(var(--spacing) * 1.5);
    }
    & :where(ul, ol):has(> li > p) > :where(li + li) {
      margin-block-start: calc(var(--spacing) * 4);
    }
    & :where(li > *) { margin-block: calc(var(--spacing) * 2); }
    & :where(li > :first-child) { margin-block-start: 0; }
    & :where(li > :last-child) { margin-block-end: 0; }
    & :where(li > ul, li > ol) {
      margin-block: calc(var(--spacing) * 2) 0;
    }
    & :where(li > ul, li > ol):has(> li > p) {
      margin-block-start: calc(var(--spacing) * 4);
    }
    & :where(li > ul:last-child, li > ol:last-child) {
      margin-block-end: calc(var(--spacing) * 4);
    }
    & :where(dl) { margin-block-end: calc(var(--spacing) * 6); }
    & :where(dt) { @apply font-medium; }
    & :where(dt + dt) { margin-block-start: var(--spacing); }
    & :where(dd) {
      margin-block-start: calc(var(--spacing) * 2);
    }
    & :where(dd + dt, dl > div + div) {
      margin-block-start: calc(var(--spacing) * 6);
    }
    & :where(dd > * + *) { margin-block-start: calc(var(--spacing) * 2); }
    & :where(dd > :first-child) { margin-block-start: 0; }
    & :where(dd > :last-child) { margin-block-end: 0; }
    & :where(blockquote) { @apply border-l-2 border-line-strong pl-6; }
    & :where(code,kbd) { @apply font-mono text-sm; }
    & :where(:not(pre) > code) { @apply rounded-badge bg-surface px-1.5; }
    & :where(pre) { @apply overflow-x-auto rounded-control bg-surface px-6 py-5; }
    & :where(table) { @apply my-8 w-full border-collapse text-sm; }
    & :where(th,td) { @apply border-b border-line py-3 text-left; }
    & :where(th) { @apply font-medium; }
    & :where(hr) { @apply border-line my-20; }
    & :where(figure) { @apply my-8; }
    & :where(caption, figcaption) { @apply text-sm text-muted; }
  }
}

/* Utilities — semantic roles composed from Body, never separate scales */
/* ---------------------------------------------------------- */

@utility k-label { @apply text-sm mb-2 block tracking-xs; }
@utility k-caption { @apply text-sm; }
@utility k-caption-sm { @apply text-xs; }
@utility k-code {
  @apply font-mono text-sm;
  font-feature-settings: "zero" on, "liga" off, "calt" off;
}