/* ── BRANDT INTERACTIVE — DESIGN TOKENS ───────────────────────────────────
   Source: project-docs/design-system.md (D-020, D-021, D-051). Do not add a
   color, font, radius, or shadow here without a decision in
   decisions-register.md.
   ──────────────────────────────────────────────────────────────────────── */

:root {
  /* Color (D-020) */
  --color-navy:         #263D88;
  --color-blue:         #4366B0;
  --color-ink:          #16181D;
  --color-body:         #3A3F4A;
  --color-bone:         #F4F0E7;
  --color-bone-deep:    #E7E0D2;
  --color-white:        #FFFFFF;
  --color-brass:        #B1843A;
  --color-brass-bright: #CF9D4B;
  --color-signal:       #5B7F5E;
  --color-slate:        #64748B;
  --color-line:         #D9D4CA;
  --color-error:        #9F2F2F;
  --color-focus:        #4366B0;

  /* Typography — U-010 defaults to Inter; do not mix Inter and Sora */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Inter", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", Consolas, monospace;

  /* Type scale (design-system.md §4) — fluid between the documented
     mobile and desktop targets */
  --text-display-xl: clamp(2.625rem, 2.0rem + 2.7vw, 4.75rem);    /* 42–76px */
  --text-display-l:  clamp(2.25rem,  1.83rem + 1.8vw, 3.625rem);  /* 36–58px */
  --text-h2:         clamp(1.75rem,  1.5rem + 1.05vw, 2.625rem);  /* 28–42px */
  --text-h3:         clamp(1.3125rem, 1.17rem + 0.6vw, 1.75rem);  /* 21–28px */
  --text-body-l:     clamp(1.125rem, 1.08rem + 0.2vw, 1.3125rem); /* 18–21px */
  --text-body:       clamp(1rem,     0.98rem + 0.1vw, 1.125rem);  /* 16–18px */
  --text-small:      clamp(0.8125rem, 0.8rem + 0.05vw, 0.9375rem); /* 13–15px */
  --text-label:      clamp(0.6875rem, 0.68rem + 0.05vw, 0.8125rem); /* 11–13px */

  /* Containers (design-system.md §5) */
  --container-wide:     1280px;
  --container-standard: 1120px;
  --container-reading:  760px;

  /* Spacing scale (design-system.md §5) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ── Radii (D-051) — RATIFIED ───────────────────────────────────────────
     Radius is an affordance signal, not decoration.

       Things you TOUCH get radius   → --radius-control (buttons, inputs,
                                        selects, menu items, toggles)
       Things that PRESENT get none  → --radius-surface (cards, panels,
                                        bands, media, status blocks)

     Squared information surfaces read as report sheets, which is the correct
     vernacular for an audit practice. The interactive layer keeps its radius
     so controls still read as controls. Do not introduce a third tier and do
     not round a surface to "soften" a section — if a surface needs softening,
     the problem is spacing or contrast, not the corner. */
  --radius-control: 3px;
  --radius-surface: 0px;

  /* ── Shadows (D-051) — RATIFIED ─────────────────────────────────────────
     Elevation is reserved for elements that genuinely float above the page:
     the nav submenu, and any future modal or popover. Static surfaces
     separate with --color-line, never with a shadow. One token exists so it
     cannot be misapplied as ambient depth. */
  --shadow-overlay: 0 1px 0 rgba(22, 24, 29, 0.04),
                    0 10px 20px -12px rgba(22, 24, 29, 0.28);

  /* Rules — the structural device that replaces elevation. Brass is legal
     here (non-text) and nowhere near body or label copy. */
  --rule-hair:   1px solid var(--color-line);
  --rule-accent: 2px solid var(--color-brass);
  --rule-strong: 2px solid var(--color-navy);

  /* Focus ring — WCAG 2.2 AA visible-focus requirement */
  --focus-ring: 0 0 0 3px rgba(67, 102, 176, 0.45);
}

/* ── Contrast notes (checked against D-020 hex values, WCAG relative
   luminance formula) ──────────────────────────────────────────────────

   PASS for normal text:
     --color-navy on white        9.97:1
     --color-ink on bone         15.61:1
     --color-body on white       10.55:1
     --color-blue on white        5.58:1  (links)
     --color-error on white       7.19:1
     --color-slate on white       4.76:1  (barely — do not also reduce size)

   FAIL for normal/small text — large text or non-text elements only:
     --color-brass on white       3.37:1  (needs 4.5, has 3 — large-text/UI only)
     --color-brass on bone        2.96:1  (fails even the large-text 3:1 threshold)
     --color-signal on white      4.52:1  (passes, but with almost no margin)

   Rule: never set --color-brass as body or label text color. Use it for
   rules, borders, icons, and large emphasis type only. Use --color-ink or
   --color-slate for small mono labels instead. --rule-accent above is the
   sanctioned brass usage. */