/* Hanken Grotesk — self-hosted via @fontsource/hanken-grotesk */
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-grotesk-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}

:root {
  /* Color */
  --color-bg:       #f5f4f0;
  --color-text:     #111110;
  --color-accent:   #0000ff;
  --color-muted:    #111110;
  --color-border:   #d4d3cf;
  --color-on-accent: #fff;  /* text on accent-colored backgrounds */
  color-scheme: light;

  /* Typography */
  --font-sans: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;

  --text-sm:       clamp(0.875rem, 0.8rem   + 0.4vw,   1.125rem); /* 14px → 18px */
  --text-base:     clamp(1.125rem, 1.085rem + 0.2vw,   1.25rem);  /* 18px → 20px */
  --text-wordmark: clamp(1.25rem,  1.05rem  + 0.5vw,   1.375rem); /* 20px → 22px */
  --text-lg:       clamp(1.5rem,   1.45rem  + 0.25vw,  1.75rem);  /* 24px → 28px — ×1.75 from base, 7 units */
  --text-xl:       clamp(2rem,     1.917rem + 0.417vw, 2.25rem);  /* 32px → 36px — ×1.333 from lg */
  --text-display:  clamp(3rem,     2.25rem  + 3vw,     5.5rem);   /* 48px → 88px — breaks strict scale intentionally */

  /* Rhythm — vertical grid, all multiples of --space-unit */
  --rhythm:    2rem;    /*  8 units — body text line box */
  --rhythm-sm: 1.5rem;  /*  6 units — code blocks, captions */
  --rhythm-lg: 2.5rem;  /* 10 units — h3 line box */
  --rhythm-xl: 3rem;    /* 12 units — h2 line box */

  /* Display heading: unitless — spans 3rem–5.5rem, absolute LH not feasible */
  --leading-display: 1.05;

  /* Retained: unitless — bullet dot geometry depends on this exact value */
  --leading-normal: 1.5;

  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.12em;

  /* Spacing — base unit: 0.25rem (4px @ 16px root) */
  --space-unit: 0.25rem;

  --space-4:   0.25rem;  /*  1 unit */
  --space-8:   0.5rem;   /*  2 units */
  --space-12:  0.75rem;  /*  3 units */
  --space-16:  1rem;     /*  4 units */
  --space-24:  1.5rem;   /*  6 units */
  --space-32:  2rem;     /*  8 units */
  --space-48:  3rem;     /* 12 units */
  --space-64:  4rem;     /* 16 units */
  --space-96:  6rem;     /* 24 units */
  --space-128: 8rem;     /* 32 units */

  /* Semantic aliases — all existing call sites preserved */
  --space-xs:  var(--space-4);
  --space-s:   var(--space-8);
  --space-m:   var(--space-16);
  --space-l:   var(--space-32);
  --space-xl:  var(--space-64);
  --space-2xl: var(--space-128);

  /* Layout */
  /* 60ch is calibrated for Hanken Grotesk, whose '0' glyph is ~1.25× the average
     character width. 72ch with this font ≈ 90 chars/line; 60ch ≈ 75 chars/line.
     Verify against the actual font whenever the typeface changes. */
  --content-width: 60ch;
  --site-padding:  clamp(1rem, 5vw, 3rem);
  --nav-height:    6rem;
  --size-qr:       3.5rem;   /* 14 units — footer QR code */
  --rule-weight:   0.25rem;  /* 1 unit — typographic rule above H2s */
  --border-weight: 2px;      /* layout rule weight — matches nav scrolled border */

  /* Micro-text for code block labels — documented exception (2.5 units) */
  --text-code-label: 0.625rem;

  /* Links */
  --color-link:         var(--color-accent); /* default link color */
  --color-link-visited: #6600cc;             /* visited state */
  --color-link-hover:   #0000cc;             /* hover/active state */

  /* Utility */
  --color-white: #fff;

  /* Motion */
  --transition: color 0.15s ease, background-color 0.15s ease,
                border-color 0.15s ease, outline-color 0.15s ease;

}

/* ─── Dark mode ───────────────────────────────────────────────────────────── */
/*
 * Contrast ratios (dark mode, bg #111110):
 *   text #f8f4e4    — 17.2:1  AAA
 *   accent #4d94ff  —  6.1:1  AA
 *   muted #9e9e9c   —  6.8:1  AA
 *   visited #bb88ff —  7.1:1  AAA
 *   hover #6699ff   —  6.6:1  AA
 *   on-accent #111110 on #4d94ff — 6.1:1 AA (skip link)
 */

/* System preference — no explicit user override */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:           #111110;
    --color-text:         #f8f4e4;
    --color-accent:       #4d94ff;
    --color-muted:        #9e9e9c;
    --color-border:       #3a3a38;
    --color-link:         #4d94ff;
    --color-link-visited: #bb88ff;
    --color-link-hover:   #6699ff;
    --color-on-accent:    #111110;
    color-scheme: dark;
  }
}

/* Explicit user choice: dark */
:root[data-theme="dark"] {
  --color-bg:           #111110;
  --color-text:         #f8f4e4;
  --color-accent:       #4d94ff;
  --color-muted:        #9e9e9c;
  --color-border:       #3a3a38;
  --color-link:         #4d94ff;
  --color-link-visited: #bb88ff;
  --color-link-hover:   #6699ff;
  --color-on-accent:    #111110;
  color-scheme: dark;
}

/* Explicit user choice: light (overrides system dark preference) */
:root[data-theme="light"] {
  color-scheme: light;
}