/*
  LEO design tokens
  ------------------------------------------------------------------
  Single source of truth for every colour, radius, spacing, type and
  motion value used across the site. Nothing outside this file may
  contain a literal hex/rgba colour, a "magic number" radius, or a
  clamp() heading size — reference a token instead.

  Source of truth: reference/leo-v3-round-table.html <style> block.
  See docs/DESIGN-TOKENS.md for the full token table, every
  foreground/background contrast ratio, and the list of prototype
  values that were promoted from hard-coded literals into tokens
  here.
  ------------------------------------------------------------------
*/

:root {

  /* =====================================================
     1. APPROVED PALETTE — transcribed from the prototype
     ===================================================== */
  --paper: #F4F7F6;
  --white: #FFFFFF;
  --ink: #0F2B31;
  --ink-2: #456068;

  /* --muted was #7A9099 in the prototype (3.10:1 on --paper, 3.35:1
     on --white — fails WCAG AA 4.5:1 for normal text at every small
     size the prototype actually uses it: 10px–13.5px labels and
     helper copy). Darkened in-hue to #5B6E76, which reaches
     4.95:1 on --paper and 5.33:1 on --white. See DESIGN-TOKENS.md
     "Contrast failures" for the full before/after. */
  --muted: #5B6E76;

  --teal: #0E6B72;
  --teal-dk: #0A555B;
  --teal-lt: #E2F0EF;
  --sun: #EF9F26;
  --mist: #DCE9E7;

  --line: rgba(15, 43, 49, .12);
  --line-soft: rgba(15, 43, 49, .07);

  --shadow: 0 2px 4px rgba(15, 43, 49, .04), 0 14px 30px -18px rgba(15, 43, 49, .3);

  --r: 18px;
  --wrap: 1160px;
  --wrap-pad: 26px; /* .wrap { padding: 0 26px } — the one place this exact value is used */

  /* =====================================================
     2. PALETTE EXTENSIONS
     Values the prototype used as bare hex/rgba literals inside
     rules (never named as a custom property). Promoted here so
     every colour in the system has exactly one definition.
     ===================================================== */

  /* on-sun text + hover (.btn-sun) */
  --sun-ink: #3A2402;
  --sun-dk: #E19420;
  /* soft sun tint used for the notice/callout band (.notice) */
  --sun-bg: rgba(239, 159, 38, .12);
  --sun-border: rgba(239, 159, 38, .4);

  /* --sun-text — foreground-safe variant of --sun for small text/icons
     sitting directly on --white or --paper (e.g. .seat span "Seat open"
     labels, .faq summary::after +/- marker). --sun (#EF9F26) itself
     reaches only 2.17:1 on --white and 2.02:1 on --paper — nowhere near
     the 4.5:1 normal-text minimum. --sun-dk (#E19420, the .btn-sun
     hover *background*) is barely darker and still fails at 2.48:1 /
     2.30:1 — it was never validated as a foreground colour, only as a
     background with --sun-ink on top, and is not a substitute here.
     --sun-text darkens in-hue (same ~36° hue, ~86% saturation as --sun,
     lightness reduced from 54% to 32%, the same technique used for the
     --muted fix above) to #98600B, which reaches 5.23:1 on --white and
     4.86:1 on --paper — both clear 4.5:1, with --paper (the stricter of
     the two, since it is slightly less bright than --white) kept above
     4.5 with margin rather than sitting on the edge. See
     docs/DESIGN-TOKENS.md §5 for the full before/after. */
  --sun-text: #98600B;

  /* --border-strong — foreground/boundary-safe variant of --line/--border for use
     specifically where a border is the *sole* way a control's resting-state boundary is
     perceived (not a decorative divider). --line (rgba(15,43,49,.12)) composited on
     --white or --paper measures only 1.26:1 against either — nowhere near the 3:1
     SC 1.4.11 minimum for a non-text UI-component boundary — yet it is reused as the only
     visible resting-state edge on real interactive controls: `.btn-ghost` (page-background
     ghost button), `.navtoggle`, and the resting border of `.qf-search input` /
     `.notfound-search input` / `.field input,textarea,select`. Found by a11y-auditor's
     independent full re-sweep (Phase 3 attempt 4); see DESIGN-TOKENS.md §4/§5.
     --line itself is not touched — it is one of the approved-palette values CLAUDE.md
     instructs every agent to "transcribe exactly," and it remains correct as-is for
     decorative dividers/hairlines elsewhere. Per the same "add a distinct, darkened
     variant, don't overload the original" pattern already used for --muted and
     --sun-text, a new token is added instead: same ink hue/rgb (15,43,49) as --line,
     alpha raised from .12 to .55. This reaches 3.57:1 on --white and 3.48:1 on --paper
     (the stricter of the two) — both clear the 3:1 minimum with headroom, while staying
     visibly in the --ink/--line family rather than reading as an unrelated new colour. */
  --border-strong: rgba(15, 43, 49, .55);

  /* the EMPTY-data chip (.missing) */
  --danger: #A32F2F;
  --danger-bg: rgba(163, 47, 47, .08);
  --danger-border: rgba(163, 47, 47, .45);

  /* focus / input glow ring. The prototype used both
     rgba(14,107,114,.12) (search inputs) and rgba(14,107,114,.1)
     (form fields) for the same effect — normalized to one value. */
  --ring: 0 0 0 4px rgba(14, 107, 114, .12);

  /* modal + overlay */
  --scrim: rgba(15, 43, 49, .5);
  --shadow-modal: 0 40px 80px -22px rgba(15, 43, 49, .5);

  /* hover-state shadows */
  --shadow-hover: 0 14px 30px -14px rgba(15, 43, 49, .34);
  --shadow-accent: 0 10px 22px -12px rgba(14, 107, 114, .9);

  /* ghost buttons / decorative elements sitting on a solid teal
     background (the closing "band" section)

     --on-teal-border was rgba(255,255,255,.45) — 2.53:1 against --teal,
     failing the 3:1 non-text/UI-component minimum (SC 1.4.11) for the
     resting-state border of `.band .btn-ghost`. Raised to alpha .58
     (~3.20:1) — same white, same --teal, alpha only. Found by
     a11y-auditor's independent full re-sweep (Phase 3 attempt 4). See
     DESIGN-TOKENS.md §5. */
  --on-teal-border: rgba(255, 255, 255, .58);
  --on-teal-bg-hover: rgba(255, 255, 255, .12);
  --tint-white-soft: rgba(255, 255, 255, .05);
  /* body copy sitting directly on solid teal (.band p) */
  --on-teal-text: rgba(255, 255, 255, .85);
  /* dimmer label text sitting on solid teal (.datechip.next span).
     Was rgba(255,255,255,.72) — 4.07:1 against --teal, failing the
     4.5:1 normal-text minimum. Raised to alpha .80 (~4.63:1) — same
     white, same --teal, alpha only. Found by a11y-auditor's independent
     full re-sweep (Phase 3 attempt 4). See DESIGN-TOKENS.md §5. */
  --on-teal-text-soft: rgba(255, 255, 255, .80);

  /* teal underline under an inline text link (.deet dd a) */
  --link-underline: rgba(14, 107, 114, .3);

  /* translucent, blurred sticky header backdrop (paper-tinted) */
  --header-backdrop: rgba(244, 247, 246, .86);

  /* =====================================================
     3. SEMANTIC ALIASES — what templates/components use
     ===================================================== */
  --surface: var(--white);       /* raised card / panel background */
  --surface-alt: var(--paper);   /* page background, recessed fields */
  --surface-tint: var(--mist);   /* quiet decorative fills (rings, dividers) */
  --border: var(--line);
  --border-soft: var(--line-soft);
  --text: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--muted);
  --accent: var(--teal);
  --accent-dark: var(--teal-dk);
  --accent-soft: var(--teal-lt);
  --highlight: var(--sun);
  --highlight-ink: var(--sun-ink);
  /* foreground-safe accent — use instead of --highlight/--sun any time
     the sun colour is the text/icon colour itself (not a background
     with --highlight-ink on top). See --sun-text above. */
  --highlight-text: var(--sun-text);
  --focus-ring: var(--ink);      /* see base.css :focus-visible for why two tones are used */
  --focus-ring-inner: var(--white);

  /* =====================================================
     4. RADII
     --r is the prototype's one named radius (default card/panel).
     The rest were repeated unnamed literals — collected into a
     scale so every later agent references the same set of values
     instead of re-guessing a pixel number.
     ===================================================== */
  --r-xs: 6px;    /* focus outline corner */
  --r-sm: 10px;   /* skip link corner */
  --r-held: 12px; /* .p-held (industry-page held-note box) */
  --r-md: 14px;   /* seat/notice/field/agenda/datechip cards */
  /* --r: 18px  (section 1) — default card/panel radius */
  --r-nav-mobile: 20px; /* nav.main at the mobile breakpoint */
  --r-mobile: 22px;     /* .quickfind / .band .inner at the mobile
                            breakpoint — the mobile-width counterpart
                            of --r-xl below */
  --r-lg: 24px;   /* industry/member panel */
  --r-xl: 28px;   /* quickfind box, closing band (desktop width) */
  --r-modal: 26px; /* .modal (all corners), .modal-hd (top corners
                       only, e.g. `var(--r-modal) var(--r-modal) 0 0`) */
  --r-pill: 999px;
  --r-circle: 50%;

  /* =====================================================
     5. SPACING SCALE
     An 18-step scale built from every distinct spacing value
     actually used in the prototype's padding/margin/gap
     declarations, so component work never re-invents a number.
     ===================================================== */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 18px;
  --space-9: 20px;
  --space-10: 24px;
  --space-11: 28px;
  --space-12: 32px;
  --space-13: 40px;
  --space-14: 48px;
  --space-15: 56px;
  --space-16: 64px;
  --space-17: 82px;  /* section { padding: 82px 0 } */
  --space-18: 96px;  /* sticky offset for .filters / .sidecard (top: 96px) */

  /* =====================================================
     6. TYPE
     ===================================================== */
  /* matches the prototype's h1–h4 rule exactly:
     h1,h2,h3,h4{font-family:"Sora","Manrope",sans-serif} */
  --font-heading: "Sora", "Manrope", sans-serif;
  /* matches the prototype's ~24 other Sora-set rules (.label, .tag,
     .indexlink strong, .seat span, .datechip, .deet dt, .agenda,
     .faq summary, brand mark, etc.), all of which use the shorter
     two-value stack font-family:"Sora",sans-serif with no Manrope
     fallback step */
  --font-heading-alt: "Sora", sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* matches the prototype's bare two-value stack font-family:"Manrope",sans-serif
     used only by the plus/minus disclosure-marker glyphs
     (.indexbox summary::after, .faq summary::after) — distinct from
     --font-body's 5-value stack with system-font fallbacks, so it is kept
     as its own token rather than merged, mirroring the --font-heading /
     --font-heading-alt split above. */
  --font-body-alt: "Manrope", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* static sizes, smallest to largest */
  --text-2xs: 11px;     /* .label kicker */
  --text-xs: 13.5px;    /* helper/meta copy: count, tablehint, sort */
  --text-sm: 15.5px;    /* secondary paragraph copy: pillar/card/faq body */
  --text-base: 17px;    /* body default */
  --text-md: 17.5px;    /* section ledes */
  --text-lg: 19px;      /* hero lede, opening prose paragraph */

  /* fluid heading sizes, smallest to largest — clamp() values are
     transcribed verbatim from the prototype's inline rules */
  --text-xl: clamp(1.1rem, 2.6vw, 1.55rem);   /* round-table core name */
  --text-2xl: clamp(1.5rem, 3vw, 2.1rem);     /* quickfind h2 */
  --text-3xl: clamp(1.6rem, 3.2vw, 2.3rem);   /* industry/member panel h2 */
  --text-4xl: clamp(1.9rem, 3.8vw, 2.7rem);   /* .sec-head h2 */
  --text-4xl-band: clamp(1.8rem, 3.8vw, 2.7rem); /* .band h2 — same max
                                                      (2.7rem) and same
                                                      viewport-scaling
                                                      term (3.8vw) as
                                                      --text-4xl, but a
                                                      different min
                                                      (1.8rem vs 1.9rem)
                                                      in the prototype,
                                                      so it is kept as
                                                      its own token
                                                      rather than merged */
  --text-5xl: clamp(2.1rem, 4.4vw, 3rem);     /* legal page h1 */
  --text-6xl: clamp(2.1rem, 4.4vw, 3.2rem);   /* directory/about/visit/contact h1 */
  --text-7xl: clamp(2.4rem, 5.4vw, 4rem);     /* home hero h1 */

  --leading-tight: 1.15;   /* headings */
  --leading-normal: 1.5;   /* secondary paragraph copy */
  --leading-base: 1.65;    /* body */

  --tracking-tight: -.028em;  /* default heading tracking */
  --tracking-tighter: -.04em; /* hero / display-scale headings */
  --tracking-wide: .16em;     /* uppercase kicker labels */

  /* =====================================================
     7. MOTION
     ===================================================== */
  --duration-fast: .16s;
  --duration-base: .18s;
  --duration-slow: .26s;
  --duration-slower: .3s;
  --ease-standard: cubic-bezier(.2, .8, .3, 1);

  /* =====================================================
     8. Z-INDEX
     ===================================================== */
  --z-header: 60;
  --z-overlay: 120;
  --z-skip: 200;
}