@layer reset, tokens, base, layout, components, sections, pages, motion;

@layer tokens {
  :root {
    /* Fonts */
    --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
    --font-sans:  "Hanken Grotesk", -apple-system, "Segoe UI", system-ui, sans-serif;
    --font-mono:  "Commit Mono", ui-monospace, Consolas, Menlo, monospace;

    /* Typographic Steps */
    --step--1: 0.875rem;
    --step-0:  clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    --step-1:  clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --step-2:  clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
    --step-3:  clamp(2.2rem, 1.6rem + 2.6vw, 3.5rem);
    --step-4:  clamp(3rem, 1.6rem + 6vw, 7.25rem);

    /* Layout Measures */
    --page-max: 82rem;
    --measure: 66ch;
    --gutter: clamp(1rem, 4vw, 3rem);
    --section-gap: clamp(3.5rem, 6vw, 5.5rem);
    --h1-page: clamp(2.75rem, 1rem + 4.6vw, 5rem);
    --gap-s: 0.5rem;
    --gap-m: 1rem;
    --gap-l: 2rem;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;

    /* Curves and Durations */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    --dur-fast: 120ms;
    --dur-base: 200ms;

    /* Default Theme (Vellum - Light) */
    color-scheme: light;
    accent-color: var(--accent);
    --bg-app: #EDE9DF;
    --bg-canvas: #F7F4EE;
    --bg-panel: #F2EFE7;
    --bg-elevated: #FCFBF8;
    --bg-hover: #E5DFD4;

    --border-default: #DCD5C6;
    --border-strong: #827C6E;
    --text-primary: #1B1A17;
    --text-secondary: #57534B;
    --text-muted: #665F55;

    --accent: #7A2E2E;
    --accent-fg: #FBF6F2;
    --ink: #1B1A17;
    --ink-fg: #F7F4EE;

    --danger: #A62D2D;
    --success: #2D6A4F;
    --warning: #945318;

    --highlight-yellow: #F5E6B3;

    --shadow-md: 0 8px 24px -8px rgb(27 26 23 / 0.10);
    --shadow-lg: 0 24px 64px -16px rgb(27 26 23 / 0.18);

  }

  /* Dark preference when no explicit theme is set (Onyx) */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      color-scheme: dark;
      accent-color: var(--accent);
      --bg-app: #0F0F0E;
      --bg-canvas: #151514;
      --bg-panel: #121211;
      --bg-elevated: #1C1C1A;
      --bg-hover: #20201D;

      --border-default: #2A2A26;
      --border-strong: #6A685F;
      --text-primary: #EAE6DD;
      --text-secondary: #B5B0A4;
      --text-muted: #948F85;

      --accent: #CDB27B;
      --accent-fg: #171309;
      --ink: #EAE6DD;
      --ink-fg: #151514;

      --danger: #E05D52;
      --success: #5B9A68;
      --warning: #D4973B;

      --highlight-yellow: #4A3E1E;

      --shadow-md: 0 8px 24px -8px rgb(0 0 0 / 0.40);
      --shadow-lg: 0 24px 64px -16px rgb(0 0 0 / 0.55);

    }
  }

  /* Onyx (Dark) */
  [data-theme="onyx"] {
    color-scheme: dark;
    accent-color: var(--accent);
    --bg-app: #0F0F0E;
    --bg-canvas: #151514;
    --bg-panel: #121211;
    --bg-elevated: #1C1C1A;
    --bg-hover: #20201D;

    --border-default: #2A2A26;
    --border-strong: #6A685F;
    --text-primary: #EAE6DD;
    --text-secondary: #B5B0A4;
    --text-muted: #948F85;

    --accent: #CDB27B;
    --accent-fg: #171309;
    --ink: #EAE6DD;
    --ink-fg: #151514;

    --danger: #E05D52;
    --success: #5B9A68;
    --warning: #D4973B;

    --highlight-yellow: #4A3E1E;

    --shadow-md: 0 8px 24px -8px rgb(0 0 0 / 0.40);
    --shadow-lg: 0 24px 64px -16px rgb(0 0 0 / 0.55);

  }



  /* Vellum (Light) */
  [data-theme="vellum"] {
    color-scheme: light;
    accent-color: var(--accent);
    --bg-app: #EDE9DF;
    --bg-canvas: #F7F4EE;
    --bg-panel: #F2EFE7;
    --bg-elevated: #FCFBF8;
    --bg-hover: #E5DFD4;

    --border-default: #DCD5C6;
    --border-strong: #827C6E;
    --text-primary: #1B1A17;
    --text-secondary: #57534B;
    --text-muted: #665F55;

    --accent: #7A2E2E;
    --accent-fg: #FBF6F2;
    --ink: #1B1A17;
    --ink-fg: #F7F4EE;

    --danger: #A62D2D;
    --success: #2D6A4F;
    --warning: #945318;

    --highlight-yellow: #F5E6B3;

    --shadow-md: 0 8px 24px -8px rgb(27 26 23 / 0.10);
    --shadow-lg: 0 24px 64px -16px rgb(27 26 23 / 0.18);

  }





  /* Travertine (Light) */
  [data-theme="travertine"] {
    color-scheme: light;
    accent-color: var(--accent);
    --bg-app: #E6DFD3;
    --bg-canvas: #EFEAE1;
    --bg-panel: #E9E3D8;
    --bg-elevated: #F7F4EE;
    --bg-hover: #DFD8CB;

    --border-default: #D5CEBF;
    --border-strong: #857B6B;
    --text-primary: #1F1D17;
    --text-secondary: #4B473D;
    --text-muted: #57524A;

    --accent: #4E5A2C;
    --accent-fg: #F6F3EA;
    --ink: #1F1D17;
    --ink-fg: #EFEAE1;

    --danger: #8E2F23;
    --success: #316C4B;
    --warning: #965218;

    --highlight-yellow: #F2E2AD;

    --shadow-md: 0 8px 24px -8px rgb(31 29 23 / 0.10);
    --shadow-lg: 0 24px 64px -16px rgb(31 29 23 / 0.18);

  }

  /* Walnut (Dark) */
  [data-theme="walnut"] {
    color-scheme: dark;
    accent-color: var(--accent);
    --bg-app: #16110D;
    --bg-canvas: #1C1612;
    --bg-panel: #191410;
    --bg-elevated: #211A15;
    --bg-hover: #2A221B;

    --border-default: #332A22;
    --border-strong: #7A6E5E;
    --text-primary: #EDE4D6;
    --text-secondary: #BFB3A2;
    --text-muted: #A39785;

    --accent: #A9B98F;
    --accent-fg: #15120E;
    --ink: #EDE4D6;
    --ink-fg: #1C1612;

    --danger: #E3806F;
    --success: #5B9A68;
    --warning: #D4973B;

    --highlight-yellow: #423C1B;

    --shadow-md: 0 8px 24px -8px rgb(0 0 0 / 0.40);
    --shadow-lg: 0 24px 64px -16px rgb(0 0 0 / 0.55);

  }

  /* Derived tokens across all themes */
  :root, [data-theme] {
    --border-subtle: color-mix(in oklab, var(--border-default) 50%, transparent);
    --border-hairline: color-mix(in oklab, var(--border-default) 35%, transparent);

    --accent-subtle: color-mix(in oklab, var(--accent) 14%, transparent);

  }
}