/* ==========================================================================
   Scryglass design tokens
   --------------------------------------------------------------------------
   Every value below is taken verbatim from the design handoff colour and
   typography tables. This file is the contract between the design and the
   implementation: components reference tokens, never raw hex.

   Two rules from the handoff that no component may break:
     - Border radius is 0 everywhere except the logo chips (5px) and the
       status dot (50%). The design is square by intent.
     - No shadows anywhere. Depth comes from the four background steps and
       the hairline borders.
   ========================================================================== */

:root {
  /* --- Backgrounds: four steps, at most two per page ---------------------- */
  --bg-surround: #17161a;   /* body, behind the page cards */
  --bg-page: #0C0B10;       /* every page card */
  --bg-panel: #0F0D15;      /* cards, related links, contact strip */
  --bg-recessed: #0A0910;   /* sidebars, figure mounts, code wells */
  --bg-well: #0B0A0F;       /* code blocks */

  /* --- Lines ------------------------------------------------------------- */
  --hairline: #1C1926;      /* internal dividers — the workhorse border */
  --border: #221F2B;        /* card and figure outlines */
  --border-raised: #2C2837; /* buttons, inputs */
  --dash: #322C40;          /* dashed outline, unresolved content */
  --dash-alt: #3A3547;      /* dashed outline, alternate */

  /* --- Text: primary through ghost ---------------------------------------- */
  --text-primary: #EDEBF2;   /* headings, emphasis */
  --text-body: #C6C2D0;      /* article body */
  --text-secondary: #A9A5B6; /* standfirsts */
  --text-muted: #928EA0;     /* marketing body, table values */
  --text-dim: #7E7890;       /* meta rows */
  --text-faint: #5C5769;     /* mono labels, captions */
  --text-ghost: #4F4A5C;     /* footer */
  --text-ghost-2: #3E3A48;   /* footer, quietest */

  /* --- Text: values the handoff table does not name --------------------------
     Three one-off values lifted from the artboards. They sit between the
     named steps above and are tokenised rather than inlined so a future
     palette change has one place to look. */
  --nav-link: #A29EB0;       /* header nav links (README, Header section) */
  --hero-lead: #D6D3DE;      /* home hero standfirst, brighter than body */
  --hero-sub: #8E899C;       /* home hero sub-line, quieter than muted */

  /* --- Accents ------------------------------------------------------------
     Pink is the action colour; cyan is the informational colour.
     They are never used interchangeably. */
  --accent-pink: #FF5FA2;
  --accent-cyan: #55E0FF;

  /* --- Callouts ----------------------------------------------------------- */
  --callout-neutral-bg: #0E1418;
  --callout-neutral-text: #A9C6CE;
  --callout-warn-bg: #1A1119;
  --callout-warn-text: #D8AEBC;

  /* --- Overlays ------------------------------------------------------------ */
  --bg-consent: #141220;         /* consent banner bar */
  --scrim: rgba(6, 5, 9, .82);   /* behind the beta dialog */

  /* --- Type ---------------------------------------------------------------
     Space Grotesk 400/500/700 for all UI and prose.
     JetBrains Mono 400/500 for labels, meta, code and technical values.
     Both are self-hosted from /assets/fonts/. */
  --font-ui: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono',
    Menlo, Consolas, 'Liberation Mono', monospace;

  /* --- Shape ---------------------------------------------------------------
     Named so that the two legitimate exceptions read as deliberate. */
  --radius-none: 0;
  --radius-chip: 5px;
  --radius-dot: 50%;

  /* --- Layout -------------------------------------------------------------- */
  --page-width: 1240px;
  --page-gutter: 44px;
  --header-height: 82px;
}