/* ==========================================================================
   LexDigital — design tokens
   --------------------------------------------------------------------------
   Single source of truth for the values shared by every page. Loaded FIRST on
   all production pages, before any page-specific stylesheet, so anything below can
   still override.

   Page-specific section layouts stay separate. Header, fullscreen menu, footer
   and CTA components use lex-nav.css on every page. Their HTML sources live in
   shared/ and are compiled into the static pages by scripts/build-shared.mjs.

   Two vocabularies are supported on purpose. The homepage grew up with
   `--font-display` / `--acc2` / `--shell-max`; the service pages use
   `--display` / `--acc-2` / `--shell`. Renaming 4,300 lines of homepage CSS to
   match would be a large, purely cosmetic diff with real regression risk, so
   the legacy names are kept as aliases pointing at the same value. New work
   should use the canonical names.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Colour ---- */
  --bg: #080a0c;
  --acc: #6e859b;
  --acc-2: #8fb3cc;
  --brand-electric: #7d9cb5;
  --text: #f4f6f8;
  --para: rgba(228,233,240,.68);
  --muted: rgba(255,255,255,.55);
  --border: rgba(143,179,204,0.16);

  /* ---- Typeface ---- */
  --display: 'Space Grotesk', sans-serif;
  --body: 'Manrope', sans-serif;
  --serif: 'Instrument Serif', serif;

  /* ---- Canonical semantic type system ----
     Fluid values use rem bounds so browser zoom and user font preferences keep
     working. Component and page styles consume these roles; they do not invent
     independent responsive font scales. */
  --type-eyebrow: clamp(.76rem, .714rem + .23vw, .92rem);
  --type-h1: clamp(3rem, 2.2rem + 4vw, 5.8rem);
  --type-h2: clamp(2.25rem, 1.68rem + 2.86vw, 4.25rem);
  --type-h3: clamp(1.35rem, 1.16rem + .95vw, 2rem);
  --type-ui-title: clamp(1.03rem, .98rem + .2vw, 1.18rem);
  --type-dialog-title: clamp(1.25rem, 1.1rem + .75vw, 1.8rem);
  --type-document-title: clamp(2rem, 1.63rem + 1.85vw, 3.3rem);
  --type-document-heading: clamp(1.16rem, 1.09rem + .36vw, 1.4rem);
  --type-document-subheading: clamp(1rem, .95rem + .2vw, 1.15rem);

  --type-paragraph-lead: clamp(1.1rem, 1.043rem + .286vw, 1.3rem);
  --type-paragraph: clamp(1rem, .955rem + .225vw, 1.18rem);
  --type-paragraph-small: clamp(.92rem, .893rem + .135vw, 1.03rem);
  --type-caption: clamp(.75rem, .73rem + .1vw, .82rem);
  --type-label: var(--type-caption);
  --type-meta: var(--type-caption);

  --type-nav: clamp(.8rem, .771rem + .143vw, .9rem);
  --type-menu: clamp(1.5rem, 1.286rem + 1.07vw, 2.25rem);
  --type-cta: clamp(.78rem, .757rem + .114vw, .86rem);
  --type-brand: clamp(1.08rem, 1rem + .18vw, 1.28rem);
  --type-quote: clamp(1.2rem, 1.086rem + .57vw, 1.6rem);
  --type-metric-hero: clamp(4.5rem, 3.214rem + 6.43vw, 9rem);
  --type-metric-box: clamp(1.75rem, 1.393rem + 1.79vw, 3rem);
  --type-metric-label: var(--type-caption);
  --type-form-control: 1rem;

  /* Existing component vocabulary now aliases the semantic roles. */
  --type-hero: var(--type-h1);
  --type-section: var(--type-h2);
  --type-card-title: var(--type-ui-title);
  --type-panel-title: var(--type-h3);
  --type-tab-num: var(--type-caption);
  --type-tab-label: var(--type-nav);
  --type-chip: var(--type-caption);
  --type-pill: var(--type-caption);
  --type-stat-xl: var(--type-metric-hero);
  --type-stat-lg: clamp(2.75rem, 2.1rem + 2.6vw, 4rem);
  --type-stat-md: var(--type-metric-box);
  --type-stat-sm: var(--type-metric-box);
  --type-body: var(--type-paragraph);
  --type-body-sm: var(--type-paragraph-small);
  --section-h: var(--type-h2);
  --body-copy-size: var(--type-paragraph);

  --eyebrow-tracking: .2em;
  --quote-tracking: .012em;
  --leading-h1: .88;
  --leading-h2: .93;
  --leading-h3: 1.08;
  --leading-ui: 1.28;
  --leading-paragraph-lead: 1.62;
  --leading-paragraph: 1.72;
  --leading-paragraph-small: 1.65;
  --leading-quote: 1.55;
  --leading-caption: 1.45;
  --leading-body: var(--leading-paragraph);
  --measure-paragraph: 65ch;
  --measure-paragraph-lead: 60ch;

  /* ---- Layout ---- */
  --shell: 1600px;
  --nav-edge: clamp(18px,1.8vw,26px);
  --section-space: clamp(72px, 7.5vw, 120px);
  --space-heading: clamp(20px, 1.8vw, 28px);
  --space-action: clamp(30px, 2.8vw, 44px);
  --space-component: clamp(38px, 3.8vw, 58px);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.16,1,.3,1);

  /* ---- Interaction ---- */
  --hover-action-y: -3px;
  --hover-card-y: -4px;
  --shadow-action-hover: 0 10px 20px rgba(255,255,255,0.1);

  /* ---- Legacy homepage vocabulary — aliases, not separate values ---- */
  --acc2: var(--acc-2);
  --font-display: var(--display);
  --font-body: var(--body);
  --font-serif: var(--serif);
  --shell-max: var(--shell);
  --ease-brand: var(--ease);
}

/* The two page families keep their own layout vocabularies, but both map their
   paragraph and section-rhythm aliases to the canonical tokens above. */