/* ==========================================================================
   Design tokens
   Monochrome by intent. Hierarchy comes from type, spacing, hairlines and
   material, never from hue. There is exactly one accent, a desaturated warm
   stone, and it is used sparingly.

   If you ever want to reintroduce a colour, change --accent here and nowhere
   else. Nothing downstream hardcodes a hue.
   ========================================================================== */

:root {
  /* --- Canvas ------------------------------------------------------------ */
  --bg:          #0a0a0b;
  --bg-elevated: #0f0f11;
  --bg-sunken:   #070708;

  /* Surfaces are warm-tinted white at low alpha, so glass picks up a faint
     warmth off the canvas rather than reading blue. */
  --surface:       rgba(255, 252, 246, 0.030);
  --surface-hover: rgba(255, 252, 246, 0.058);
  --surface-solid: #131315;

  --hairline:        rgba(240, 236, 228, 0.10);
  --hairline-strong: rgba(240, 236, 228, 0.19);

  /* --- Ink --------------------------------------------------------------- */
  --text:       #f2f0ec;
  --text-muted: #a29d96;
  --text-faint: #757069;

  /* --- Accent ------------------------------------------------------------- */
  /* Warm stone. Desaturated enough to read as neutral, warm enough to stop
     the page feeling clinical. */
  --stone: #c9c0b4;
  --bone:  #ede7de;

  --accent:      var(--stone);
  --accent-ink:  #0a0a0b;   /* text on a bone/stone fill */

  /* Kept as variables so surfaces can share one recipe. Both are flat fills,
     not gradients: the design deliberately has none. */
  --fill-strong: var(--bone);
  --fill-soft:   rgba(201, 192, 180, 0.10);

  --hairline-accent: rgba(201, 192, 180, 0.34);

  /* --- Type -------------------------------------------------------------- */
  /* Fraunces is a high-contrast serif with an optical-size axis: it thins out
     gracefully at display sizes, which is where the "expensive" read comes
     from. Inter carries everything at text size. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* System stack rather than a webfont. Mono is used only for small uppercase
     labels (dates, breadcrumbs, percentages), which is not worth the download. */
  --font-mono:    ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono",
                  Consolas, "Liberation Mono", Menlo, monospace;

  /* Fluid scale, min at 360px, max at 1440px. */
  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.82rem, 0.79rem + 0.16vw, 0.92rem);
  --step-0:  clamp(0.98rem, 0.94rem + 0.22vw, 1.09rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.38rem);
  --step-2:  clamp(1.36rem, 1.22rem + 0.62vw, 1.82rem);
  --step-3:  clamp(1.62rem, 1.38rem + 1.05vw, 2.40rem);
  --step-4:  clamp(1.95rem, 1.55rem + 1.75vw, 3.20rem);
  --step-5:  clamp(2.35rem, 1.70rem + 2.85vw, 4.30rem);
  --step-6:  clamp(2.75rem, 1.55rem + 5.40vw, 6.30rem);

  --leading-tight: 1.06;
  --leading-snug:  1.25;
  --leading-body:  1.70;

  /* Serif display wants less negative tracking than a grotesque. */
  --tracking-display: -0.018em;

  /* --- Space ------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);
  --gutter:    clamp(1.15rem, 0.6rem + 2.4vw, 2.75rem);
  --measure:   68ch;
  --content-max: 1240px;
  --content-wide: 1400px;

  /* --- Shape ------------------------------------------------------------- */
  /* Tighter radii than the previous direction. Softness reads casual; a
     near-square corner reads considered. */
  --radius-sm: 4px;
  --radius:    7px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  --blur-glass: 20px;

  /* --- Elevation ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow:    0 10px 34px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 26px 74px rgba(0, 0, 0, 0.6);

  /* --- Motion ------------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --dur-fast: 160ms;
  --dur:      300ms;
  --dur-slow: 640ms;

  /* Live pointer position, written by site.js for the cursor light. */
  --mx: 50%;
  --my: 30%;

  --header-h: 76px;
  --z-aurora: 0;
  --z-grain: 1;
  --z-content: 2;
  --z-header: 60;
  --z-overlay: 80;
}

@media (max-width: 700px) {
  :root { --header-h: 62px; }
}