/* =========================================================================
   SUPER DEAL MAKER -- THE DESIGN TOKENS. THE ONE FILE.

   SDM 03 Part 6. The look of docs/design/rmk-website-design (approved by the
   owner, 5 October 2026) as tokens. THIS IS THE ONLY PLACE A HEX VALUE LIVES;
   every other stylesheet and template reads these names, and
   `audit/scripts/step105_look_check.py` counts any hex found elsewhere.

   THE COLOUR LAWS
     * cyan only as a BACKGROUND, or as TEXT ON BLACK;
     * never cyan text on white (1.54:1); never white text on cyan (1.54:1);
     * blue only for "go elsewhere" (leave this page);
     * green / amber / red for STATES only, never decoration.

   MEASURED CONTRAST (WCAG)
     black on cyan 12.87  |  cyan on black 12.87  |  black on white 19.80
     muted on white 6.39  |  muted on grey 5.95   |  muted-on-black 9.28
     blue on white 6.39   |  white on blue 6.39
     green / amber / red on white 5.08 / 4.87 / 5.62; black on each tint 17+
   ========================================================================= */
:root {
  /* ---- THE PALETTE (SDM 03, settled) ------------------------------------- */
  --c-black: #0A0A0A;
  --c-brand: #00E5FF;          /* cyan: a background, or text on black only */
  --c-brand-hover: #00C8E0;
  --c-brand-tint: #E0FBFF;
  --c-white: #FFFFFF;
  --c-grey: #F5F7F9;           /* page and panel background */
  --c-border: #D0D7DE;
  --c-muted: #57606A;          /* muted text on white or grey */
  --c-muted-on-black: #A8B3BD;
  --c-line-on-black: #2D333B;
  --c-line-on-black-2: #1F2328;
  --c-leave: #0B57D0;          /* "go elsewhere" only */
  --c-leave-hover: #0842A0;
  --c-ok: #1A7F37;   --c-ok-tint: #E6F4EA;     /* STATE: ready, done, saved */
  --c-warn-ink: #9A6700; --c-warn-tint: #FFF4D6; /* STATE: almost, waiting */
  --c-bad: #C62828;  --c-bad-tint: #FDECEC;    /* STATE: not yet, error */
  --c-shadow: rgba(10, 10, 10, 0.12);
  --c-glow: rgba(0, 229, 255, 0.18);
  --c-shadow-strong: rgba(10, 10, 10, 0.25);   /* SDM 05: the phone drawing */

  /* ---- TYPE -------------------------------------------------------------- */
  --font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto,
                 "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Roboto Mono", Consolas, monospace;
  --fs-1: 14px;       /* eyebrow, captions, badges -- never body */
  --fs-2: 16px;       /* BODY: the floor */
  --fs-3: 18px;       /* lead, H3 */
  --fs-4: 22px;       /* in-app H2 band */
  --fs-5: 26px;
  --fs-6: 32px;
  --fs-lead: 20px;    /* hero lead */
  --fs-h2: 40px;      /* public H2 */
  --fs-hero: 58px;    /* public hero H1 */
  --fw-regular: 400;
  --fw-medium: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --ls-hero: -1.8px;
  --ls-h2: -1px;
  --ls-eyebrow: 1.5px;
  --lh-body: 1.5;
  --lh-tight: 1.15;
  --measure: 75ch;

  /* ---- SPACE ------------------------------------------------------------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-section: 88px;          /* public sections: vertical padding */
  --container: 1200px;
  --gutter: 24px;
  --gutter-phone: 16px;

  /* ---- RADIUS, SHADOW, BORDER, TARGET ------------------------------------ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-btn: 12px;          /* buttons 10-12px */
  --radius-card: 16px;         /* cards 14-20px */
  --radius-card-lg: 20px;
  --radius-pill: 12px;         /* the button radius (name kept from Step 105) */
  --radius-round: 999px;
  --shadow-card: 0 1px 3px var(--c-shadow);
  --shadow-hero: 0 30px 80px var(--c-glow);
  --border-width: 1px;
  --border: var(--border-width) solid var(--c-border);
  --border-strong: 2px solid var(--c-black);
  --target: 48px;              /* every touch target */
  --target-main: 56px;         /* main buttons */
  --focus-ring: 0 0 0 3px var(--c-white), 0 0 0 6px var(--c-black);

  /* ---- ALIASES: the names written before SDM 03, on the new values -------- */
  --c-ink: var(--c-black);
  --c-grey-line: var(--c-border);
  --c-grey-muted: var(--c-muted);
  --c-grey-page: var(--c-grey);
  --c-warn: var(--c-warn-tint);        /* was an amber FILL under dark text */
  --c-band-excellent: var(--c-ok-tint);
  --c-band-good: var(--c-ok-tint);
  --c-band-average: var(--c-warn-tint);
  --c-band-below-average: var(--c-bad-tint);
  --c-band-poor: var(--c-bad-tint);
  --c-band-unverified: var(--c-grey);
  --brand-cyan: var(--c-brand);
  --brand-cyan-ink: var(--c-black);
  --brand-blue: var(--c-leave);
  --brand-blue-ink: var(--c-white);
}