/*
 * Van Every design tokens (docs/classic-look/BUILD-BRIEF.md section 2).
 * Loaded first. Every lane styles with var(--...) from this file; never a raw
 * hex or px for a role that has a token here. Legacy --ve-* names are kept as
 * aliases so the shrinking ve-site.css keeps resolving while lanes migrate.
 */
:root {
  /* 2.1 colour
     Direction A "Premier" (DIRECTIONS-BRIEF 2026-09-28): pink stays the
     action colour (eyebrows, links, solid buttons); navy takes every role
     Premier gives its blue (headings, nav, counters, CTA panels, the hero
     wash); gold is a small accent only (stars, hairlines). Contrast table in
     docs/classic-look/directions/a.md. Never pink text on navy (2.2:1). */
  --c-pink: #d81368;
  --c-pink-bright: #ec247c;
  --c-pink-deep: #a80f51;
  --c-pink-light: #f5a3c4; /* the only pink allowed as text on navy (5.8:1) */
  --c-rose: #a34a72;
  --c-pink-tint: #fdf2f6;
  --c-navy: #053e67;       /* white on it 11.1; it on white 11.1 */
  --c-navy-deep: #03304f;  /* white on it 13.6 */
  --c-navy-mid: #0b4f7c;   /* gradient end only; white on it 8.7 */
  --c-navy-tint: #eef3f8;  /* navy on it 9.95; never pink text on it (4.47) */
  --c-navy-wash: #f5f8fb;  /* title bands: pink on it 4.68, navy 10.5 */
  --c-gold: #fdb312;
  --c-gold-deep: #e39e00;
  --c-gold-light: #ffc94a; /* small gold text on --c-pink-deep: 4.81 (--c-gold is 4.08) */
  --c-ink: var(--c-navy);  /* headings, nav, labels: navy replaces near-black */
  --c-black: #1c1c1c;
  --c-text: #333333;
  --c-muted: #5c6670;      /* 5.85 on white, 5.60 on #fafafa, 5.24 on navy-tint */
  --c-line: #e3e8ee;
  --c-line-strong: #b9c2cc; /* decorative only */
  --c-field-line: #8795a3;  /* form field borders: 3.06:1 on white (WCAG 1.4.11) */
  --c-surface: #fafafa;
  --c-white: #ffffff;
  /* CTA panels, team tiles, brand bands: deep navy to a slightly lighter
     navy (white text >= 8.7:1 at every point). */
  --grad-brand: linear-gradient(120deg, var(--c-navy-deep) 0%, var(--c-navy) 52%, var(--c-navy-mid) 100%);
  --grad-pink: linear-gradient(120deg, var(--c-rose) 0%, var(--c-pink) 88%);
  /* the signature hairline: pink into gold */
  --rule-brand: linear-gradient(90deg, var(--c-pink) 0%, var(--c-pink-bright) 45%, var(--c-gold) 100%);
  /* Hero wash: Premier veils its hero photo in its brand blue; ours is a navy
     veil, firm where the headline sits (lower middle) and light over the faces. */
  --wash-hero:
    linear-gradient(180deg, rgb(3 48 79 / 0.30) 0%, rgb(3 48 79 / 0.06) 24%, rgb(3 48 79 / 0.10) 44%, rgb(3 48 79 / 0.60) 58%, rgb(3 48 79 / 0.80) 74%, rgb(3 48 79 / 0.88) 100%);
  /* phones: portrait photo, faces in the top half, text in the bottom half */
  --wash-hero-mobile:
    linear-gradient(180deg, rgb(3 48 79 / 0.10) 0%, rgb(3 48 79 / 0.04) 30%, rgb(3 48 79 / 0.55) 55%, rgb(3 48 79 / 0.86) 100%);
  /* destination pages: left-aligned title, so the veil is firm on the left
     and clears over the people on the right */
  --wash-hero-page: linear-gradient(90deg, rgb(3 48 79 / 0.88) 0%, rgb(3 48 79 / 0.80) 38%, rgb(3 48 79 / 0.46) 56%, rgb(3 48 79 / 0.10) 76%, rgb(3 48 79 / 0.04) 100%);
  --wash-hero-page-tablet: linear-gradient(90deg, rgb(3 48 79 / 0.88) 0%, rgb(3 48 79 / 0.78) 60%, rgb(3 48 79 / 0.52) 100%);
  --wash-hero-page-mobile: linear-gradient(180deg, rgb(3 48 79 / 0.55) 0%, rgb(3 48 79 / 0.78) 100%);
  --focus-ring: 0 0 0 2px var(--c-white), 0 0 0 4px var(--c-pink);

  /* 2.2 type */
  --font-sans: 'Poppins', 'Poppins Fallback', Arial, Helvetica, sans-serif;
  /* Fluid sizes (Utopia-style): scale smoothly from a 360px phone to a
     1280px desktop, same end points as the old breakpoint steps. */
  --fs-hero: clamp(2rem, 1.4375rem + 2.5vw, 3.4375rem);
  --fs-h1: clamp(2rem, 1.413rem + 2.609vw, 3.5rem);
  --fs-h2: clamp(1.875rem, 1.484rem + 1.739vw, 2.875rem);
  --fs-h3: 20px;
  --fs-eyebrow: 16px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-small: 15px;
  --fs-nav: 14px;
  --fs-btn: 16px;
  --fs-btn-lg: 18px;
  --fs-stat: clamp(2.5rem, 2.109rem + 1.739vw, 3.5rem);
  --lh-tight: 1.1;
  --lh-heading: 1.3;
  --lh-body: 1.75;
  --lh-lead: 1.7;

  /* 2.3 space, shape, depth */
  --container: 1080px;
  --container-wide: 1280px;
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(56px, 7vw, 96px);
  --block-gap: clamp(1.5rem, 1.304rem + 0.87vw, 2rem);
  --radius-img: 10px;
  --radius-card: 10px;
  --radius-btn: 5px;
  --shadow-card: 0 2px 5px rgb(0 0 0 / 0.1);
  --header-line: 0 1px 0 rgb(0 0 0 / 0.1);
  --curve-h: clamp(28px, 4vw, 56px);
  --header-h: 120px;
  --header-h-stuck: 84px;
  --utility-h: 36px;

  /* 2.4 motion */
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-reveal: 400ms;
  --stagger: 100ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-std: ease;
  --reveal-y: 24px;
  --reveal-x: 32px;

  /* legacy aliases (ve-site.css) */
  --ve-pink: var(--c-pink);
  --ve-pink-bright: var(--c-pink-bright);
  --ve-pink-deep: var(--c-pink-deep);
  --ve-gold: var(--c-gold);
  --ve-gold-text: #7a5300;
  --ve-ink: var(--c-ink);
  --ve-muted: var(--c-muted);
  --ve-cream: var(--c-surface);
  --ve-blush: var(--c-pink-tint);
  --ve-butter: #fff4d6;
  --ve-plum: #3a1028;
  --ve-line: var(--c-line);
  --ve-white: var(--c-white);
  --ve-radius: var(--radius-card);
  --ve-radius-sm: var(--radius-card);
  --ve-shadow: var(--shadow-card);
  --ve-max: var(--container-wide);
  --ve-gutter: var(--gutter);
  --ve-serif: var(--font-sans);
  --ve-sans: var(--font-sans);
}

@media (max-width: 1023px) {
  :root {
    --header-h: 64px;
    --header-h-stuck: 64px;
    --utility-h: 0px;
  }
}