/* ============================================================
   TOKENS
   Design primitives. Edit here to change the system globally.
   ============================================================ */

@layer tokens {

  :root {

    /* ---- Colour ----
       Warm parchment and ink. OKLCH throughout so relative colour
       syntax can derive hovers, rules, and theme variants from one
       source of truth. HEX fallbacks included below for old browsers.
    */
    --bg:         oklch(0.935 0.006 85);    /* parchment   (#F0EEEA) */
    --fg:         oklch(0.210 0.002 80);    /* ink         (#1A1A1A) */
    --mid:        oklch(0.450 0.008 85);    /* one shade   (#615D56) */
    --line:       oklch(from var(--fg) l c h / 0.08);
    --faint:      oklch(from var(--fg) l c h / 0.04);
    --tint:       oklch(from var(--fg) l c h / 0.025);

    /* ---- Type scale (6 steps) ---- */
    --fs-small:   0.8125rem;                /* meta, labels, nav        */
    --fs-body:    1rem;                     /* paragraphs               */
    --fs-h3:      clamp(1.125rem, 1.6vw, 1.25rem);
    --fs-h2:      clamp(1.5rem, 3vw, 2.25rem);
    --fs-h1:      clamp(2rem, 5vw, 3.25rem);
    --fs-display: clamp(3rem, 11vw, 8rem);  /* hero only                */

    /* ---- Tracking (2 tokens) ---- */
    --track-tight: -0.015em;                /* display, large serif     */
    --track-wide:  0.18em;                  /* uppercase labels, nav    */

    /* ---- Spacing (6 rungs + edge/section) ---- */
    --s-1: 0.25rem;   /*   4 */
    --s-2: 0.5rem;    /*   8 */
    --s-3: 1rem;      /*  16 */
    --s-4: 1.5rem;    /*  24 */
    --s-5: 3rem;      /*  48 */
    --s-6: 6rem;      /*  96 */

    --edge:          clamp(1.5rem, 4vw, 3rem);
    --section:       clamp(5rem, 10vw, 8rem);
    --section-tight: clamp(3rem, 6vw, 5rem);

    /* ---- Layout ---- */
    --content-max:   1400px;
    --reading-max:   68ch;

    /* ---- Motion ---- */
    --ease:   cubic-bezier(0.22, 1, 0.36, 1);
    --t-fast: 0.2s;
    --t-med:  0.4s;
    --t-slow: 0.8s;

    color-scheme: light;
  }

  /* Dark theme, explicit class takes precedence */
  :root.dark {
    --bg:    oklch(0.210 0.002 80);
    --fg:    oklch(0.935 0.006 85);
    --mid:   oklch(0.585 0.008 85);
    --line:  oklch(from var(--fg) l c h / 0.10);
    --faint: oklch(from var(--fg) l c h / 0.04);
    --tint:  oklch(from var(--fg) l c h / 0.025);
    color-scheme: dark;
  }

  /* Respect system preference when user has not chosen */
  @media (prefers-color-scheme: dark) {
    :root:not(.light) {
      --bg:    oklch(0.210 0.002 80);
      --fg:    oklch(0.935 0.006 85);
      --mid:   oklch(0.585 0.008 85);
      --line:  oklch(from var(--fg) l c h / 0.10);
      --faint: oklch(from var(--fg) l c h / 0.04);
      --tint:  oklch(from var(--fg) l c h / 0.025);
      color-scheme: dark;
    }
  }

  /* ---- Fallback for browsers without relative colour syntax ---- */
  @supports not (color: oklch(from black l c h)) {
    :root {
      --bg:    #F0EEEA;
      --fg:    #1A1A1A;
      --mid:   #615D56;
      --line:  rgba(26, 26, 26, 0.08);
      --faint: rgba(26, 26, 26, 0.04);
      --tint:  rgba(26, 26, 26, 0.025);
    }
    :root.dark {
      --bg:    #1A1A1A;
      --fg:    #F0EEEA;
      --mid:   #87847C;
      --line:  rgba(240, 238, 234, 0.10);
      --faint: rgba(240, 238, 234, 0.04);
      --tint:  rgba(240, 238, 234, 0.025);
    }
  }
}