/* ==========================================================================
   DESIGN TOKENS — the single source of truth for the brand system.
   Gritty editorial: pitch black ground, porcelain type, 1px hairlines,
   generous structural whitespace.
   ========================================================================== */

:root {
  /* ---- Color: raw palette ------------------------------------------------ */
  --c-black:        #000000;   /* pitch black — the ground, never lifted */
  --c-ink:          #0A0A0A;   /* barely-raised surface for stacked panels */
  --c-ink-2:        #121212;   /* pressed / hover surface */
  --c-porcelain:    #F2EFE9;   /* crisp porcelain — primary text */
  --c-porcelain-70: rgba(242, 239, 233, 0.70);
  --c-porcelain-50: rgba(242, 239, 233, 0.50);
  --c-porcelain-30: rgba(242, 239, 233, 0.30);
  --c-porcelain-12: rgba(242, 239, 233, 0.12);
  --c-porcelain-08: rgba(242, 239, 233, 0.08);
  --c-signal:       #E8442E;   /* punk red — used sparingly, never decoratively */

  /* ---- Color: semantic roles -------------------------------------------- */
  --bg:             var(--c-black);
  --bg-raised:      var(--c-ink);
  --bg-pressed:     var(--c-ink-2);
  --text:           var(--c-porcelain);
  --text-muted:     var(--c-porcelain-70);
  --text-faint:     var(--c-porcelain-50);
  --accent:         var(--c-signal);

  /* ---- Rules: every divider in the system is exactly 1px ----------------- */
  --rule-width:     1px;
  --rule-color:     var(--c-porcelain-12);
  --rule-color-strong: var(--c-porcelain-30);
  --rule:           var(--rule-width) solid var(--rule-color);
  --rule-strong:    var(--rule-width) solid var(--rule-color-strong);

  /* ---- Type families ----------------------------------------------------- */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Type scale (fluid) ------------------------------------------------ */
  --fs-micro:   0.6875rem;                          /* 11px — labels, eyebrows */
  --fs-small:   0.8125rem;                          /* 13px — nav, meta */
  --fs-body:    clamp(0.9375rem, 0.88rem + 0.28vw, 1.0625rem);
  --fs-lead:    clamp(1.0625rem, 0.98rem + 0.42vw, 1.25rem);
  --fs-h3:      clamp(1.25rem, 1.10rem + 0.7vw, 1.625rem);
  --fs-h2:      clamp(1.75rem, 1.35rem + 1.9vw, 3rem);
  --fs-display: clamp(2.75rem, 1.30rem + 7.1vw, 8.25rem);

  /* ---- Type mechanics ---------------------------------------------------- */
  --lh-display: 0.90;
  --lh-tight:   1.12;
  --lh-body:    1.62;
  --tr-display: -0.035em;   /* tight tracking on the big cuts */
  --tr-tight:   -0.015em;
  --tr-label:   0.16em;     /* wide tracking on mono labels */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  /* ---- Space scale (8pt base, generous at the top end) ------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;
  --sp-11: 12rem;

  /* ---- Structure --------------------------------------------------------- */
  --shell-max:     1560px;                                    /* outer bound */
  --gutter:        clamp(1.25rem, 0.6rem + 3.2vw, 4.5rem);    /* page inset */
  --section-y:     clamp(4rem, 2rem + 9vw, 10rem);            /* vertical rhythm */
  --nav-h:         72px;
  --measure:       58ch;                                      /* reading width */

  /* ---- Motion ------------------------------------------------------------ */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  120ms;
  --dur-base:  240ms;
  --dur-slow:  520ms;

  /* ---- Elevation & misc -------------------------------------------------- */
  --radius:      0px;        /* editorial system: nothing is rounded */
  --radius-pill: 999px;      /* except counters and pills */
  --z-nav:       100;
  --z-overlay:   200;
  --grain-opacity: 0.045;
}

@media (min-width: 900px) {
  :root { --nav-h: 84px; }
}