/* ============================================================
   Amberlock — design tokens
   Colour values are from spec §14.2 and are measured, not chosen
   by eye. Do not adjust them without redoing the contrast checks.

   The four rules that are easy to break:
     1. --amber is NOT a body-text colour (4.08:1 white / 4.64:1
        resin). Large text >=24px, or >=19px bold, and graphics only.
        Body copy is --bone on dark, --ink on light.
     2. --amber-bright never touches a light background (2.1:1).
        Mirror rule: --amber-deep never sits on dark (2.3:1).
     3. --cyan is reserved for liveness — live-graph edges only.
        Never a button, link, or focus ring.
     4. Severity has its own ramp outside the brand palette, and
        every severity colour must be paired with a label or icon.
   ============================================================ */

:root {
  /* ---- brand ------------------------------------------------ */
  --amber:        #C1651F;  /* 4.08:1 on white, 4.64:1 on resin. LARGE TEXT + GRAPHICS ONLY */
  --amber-bright: #F9A008;  /* DARK SURFACES ONLY. Graph glow, hover, highlight. 2.1:1 on white */
  --amber-deep:   #7A3E0F;  /* LIGHT GROUNDS ONLY — 2.3:1 on resin, unusable there */
  --resin:        #14100C;  /* dark page ground */
  --resin-raised: #1B1510;  /* cards / raised surfaces on dark */
  --bone:         #F5EFE6;  /* body text on dark; light page ground */
  --bone-dim:     #C9C0B4;  /* secondary text on dark */
  --cyan:         #4FD1C5;  /* LIVENESS ONLY — live-graph edges. Never a generic accent */
  --ink:          #1A0F08;  /* specimen bodies; body text on light grounds */

  /* ---- severity — neither amber nor cyan may encode rank ----- */
  --sev-critical: #E5484D;
  --sev-high:     #E8963C;
  --sev-medium:   #C9A227;
  --sev-low:      #8A8578;
  --ok:           #46A758;

  /* ---- derived surface values ------------------------------- */
  --hairline:       rgba(245, 239, 230, 0.16);  /* dashed dividers, card edges on dark */
  --hairline-solid: rgba(245, 239, 230, 0.10);
  --resin-veil:     rgba(20, 16, 12, 0.82);     /* sticky header backdrop */

  /* ---- type -------------------------------------------------
     Three families, three roles (§14.3). Aldrich is the wordmark
     only and is never loaded as a webfont — the logo is outlined SVG. */
  --font-display: "Space Grotesk Variable", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter Variable", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-label:   "Source Serif 4 Variable", Georgia, "Times New Roman", serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — 1.25 major third, fluid between 380px and 1280px
     viewports. Delegated to the build by §14.2; recorded here. */
  --step--1: clamp(0.833rem, 0.81rem + 0.10vw, 0.889rem);
  --step-0:  clamp(1.000rem, 0.96rem + 0.18vw, 1.125rem);  /* body */
  --step-1:  clamp(1.200rem, 1.13rem + 0.31vw, 1.406rem);
  --step-2:  clamp(1.440rem, 1.32rem + 0.51vw, 1.758rem);
  --step-3:  clamp(1.728rem, 1.53rem + 0.83vw, 2.197rem);
  --step-4:  clamp(2.074rem, 1.76rem + 1.31vw, 2.746rem);
  --step-5:  clamp(2.488rem, 2.01rem + 2.02vw, 3.433rem);
  --step-6:  clamp(2.986rem, 2.27rem + 3.03vw, 4.291rem);  /* h1 */

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.6;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.08em;   /* eyebrows / small caps labels */

  /* ---- spacing — 4px base, geometric above 1rem -------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --section-y: clamp(3.5rem, 2rem + 7vw, 7rem);   /* vertical rhythm between sections */

  /* ---- layout ----------------------------------------------- */
  --container:      74rem;   /* 1184px */
  --container-text: 42rem;   /* prose measure, ~68ch */
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);

  /* ---- radii — rounded-square geometry, from the cabochon ---- */
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 18px;
  --radius-pill: 999px;

  /* ---- motion — §13.2: subtle, fast, once ------------------- */
  --dur-fast: 140ms;
  --dur-hover: 220ms;
  --dur-scroll-in: 600ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- focus ring — --bone on dark. --cyan is forbidden. ----- */
  --focus-ring: 2px solid var(--bone);
  --focus-offset: 3px;
}

/* Breakpoints (documented; CSS uses them literally in media queries)
     s   40rem  / 640px   — stacked to two columns
     m   52rem  / 832px   — nav swaps mark -> wordmark, mobile menu retires
     l   64rem  / 1024px  — three-column layouts, hero goes side-by-side
     xl  74rem  / 1184px  — container max, no further changes            */