@layer reset, tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    color-scheme: dark;

    --font-sans: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --font-data: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --ink-950: #050c0f;
    --ink-900: #071216;
    --ink-850: #0a171c;
    --ink-800: #0e1e24;
    --ink-700: #17313a;
    --ink-600: #254650;
    --paper-50: #f5f6f1;
    --paper-100: #e8ece6;
    --paper-200: #d4dbd5;
    --paper-700: #44535a;
    --paper-850: #1a272c;
    --cyan-300: #90e8f1;
    --cyan-400: #69d9e7;
    --cyan-500: #31bcd0;
    --cyan-700: #137d8d;
    --cyan-800: #0b6472;
    --amber-300: #f4cb82;
    --amber-500: #dba44b;
    --amber-700: #76500f;
    --red-300: #f2aaa3;
    --red-500: #d85f57;
    --red-700: #9b3934;
    --green-300: #9addbf;
    --green-500: #48ae7b;
    --green-700: #236a4b;

    --surface-canvas: var(--ink-950);
    --surface-primary: var(--ink-900);
    --surface-raised: var(--ink-850);
    --surface-strong: var(--ink-800);
    --surface-paper: var(--paper-50);
    --surface-paper-muted: var(--paper-100);
    --text-primary: #eff5f3;
    --text-secondary: #a8b8bc;
    --text-muted: #789097;
    --text-paper: #102128;
    --text-paper-muted: var(--paper-700);
    --border-subtle: rgb(144 232 241 / 0.14);
    --border-medium: rgb(144 232 241 / 0.28);
    --focus: var(--cyan-300);
    --action: var(--cyan-400);
    --action-hover: var(--cyan-300);
    --action-ink: var(--ink-950);
    --header-background: rgb(5 12 15 / 0.88);
    --control-background: rgb(255 255 255 / 0.035);
    --control-background-hover: rgb(105 217 231 / 0.08);
    --control-background-active: rgb(105 217 231 / 0.14);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-28: 7rem;

    --radius-sm: 0.4rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.1rem;
    --radius-xl: 1.5rem;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 0 rgb(255 255 255 / 0.04), 0 10px 28px rgb(0 0 0 / 0.18);
    --shadow-lg: 0 24px 80px rgb(0 0 0 / 0.32);

    --content-wide: 80rem;
    --content-reading: 68ch;
    --content-narrative: 60ch;
    --header-height: 4.75rem;

    --text-ui-min: 0.8125rem;
    --text-identifier-min: 0.75rem;
    --step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
    --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
    --step-1: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
    --step-2: clamp(1.35rem, 1.16rem + 0.8vw, 1.8rem);
    --step-3: clamp(1.7rem, 1.34rem + 1.45vw, 2.5rem);
    --step-4: clamp(2.2rem, 1.62rem + 2.4vw, 3.65rem);
    --step-5: clamp(2.75rem, 1.85rem + 3.7vw, 5rem);

    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --duration-fast: 140ms;
    --duration-medium: 210ms;
  }

  /*
   * System preference is the no-script baseline. JavaScript only adds
   * data-theme for an explicit, persisted override.
   */
  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
      color-scheme: light;

      --surface-canvas: #f4f7f4;
      --surface-primary: #ffffff;
      --surface-raised: #ffffff;
      --surface-strong: #e5ece8;
      --surface-paper: #ffffff;
      --surface-paper-muted: #edf2ee;
      --text-primary: #102128;
      --text-secondary: #42575f;
      --text-muted: #5d7178;
      --text-paper: #102128;
      --text-paper-muted: #44535a;
      --cyan-300: #0b6472;
      --green-300: #236a4b;
      --amber-300: #76500f;
      --red-300: #9b3934;
      --border-subtle: rgb(16 33 40 / 0.14);
      --border-medium: rgb(16 33 40 / 0.26);
      --focus: var(--cyan-800);
      --action: var(--cyan-800);
      --action-hover: #084f5b;
      --action-ink: #ffffff;
      --header-background: rgb(244 247 244 / 0.9);
      --control-background: rgb(16 33 40 / 0.035);
      --control-background-hover: rgb(11 100 114 / 0.08);
      --control-background-active: rgb(11 100 114 / 0.13);
      --shadow-sm: 0 1px 0 rgb(255 255 255 / 0.72), 0 10px 28px rgb(16 33 40 / 0.1);
      --shadow-lg: 0 24px 80px rgb(16 33 40 / 0.18);
    }
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
  }

  :root[data-theme="light"] {
    color-scheme: light;

    --surface-canvas: #f4f7f4;
    --surface-primary: #ffffff;
    --surface-raised: #ffffff;
    --surface-strong: #e5ece8;
    --surface-paper: #ffffff;
    --surface-paper-muted: #edf2ee;
    --text-primary: #102128;
    --text-secondary: #42575f;
    --text-muted: #5d7178;
    --text-paper: #102128;
    --text-paper-muted: #44535a;
    --cyan-300: #0b6472;
    --green-300: #236a4b;
    --amber-300: #76500f;
    --red-300: #9b3934;
    --border-subtle: rgb(16 33 40 / 0.14);
    --border-medium: rgb(16 33 40 / 0.26);
    --focus: var(--cyan-800);
    --action: var(--cyan-800);
    --action-hover: #084f5b;
    --action-ink: #ffffff;
    --header-background: rgb(244 247 244 / 0.9);
    --control-background: rgb(16 33 40 / 0.035);
    --control-background-hover: rgb(11 100 114 / 0.08);
    --control-background-active: rgb(11 100 114 / 0.13);
    --shadow-sm: 0 1px 0 rgb(255 255 255 / 0.72), 0 10px 28px rgb(16 33 40 / 0.1);
    --shadow-lg: 0 24px 80px rgb(16 33 40 / 0.18);
  }

  @media (forced-colors: active) {
    :root {
      --border-subtle: CanvasText;
      --border-medium: CanvasText;
      --focus: Highlight;
      --action: LinkText;
      --action-hover: LinkText;
      --header-background: Canvas;
      --control-background: Canvas;
      --control-background-hover: Canvas;
      --control-background-active: Canvas;
      --shadow-sm: none;
      --shadow-lg: none;
    }
  }
}