/* =====================================================================
   VEM — Design Tokens
   Single source of truth. Brand system: see .claude/skills/vem-brand
   Quality bar: see .claude/skills/ten-k-checklist
   ===================================================================== */

:root {
  /* ---- Brand color ------------------------------------------------ */
  --vem-navy:        #223168; /* primary blue   */
  --vem-gold:        #B99B5F; /* primary accent — rationed */
  --vem-navy-dark:   #0B1F44; /* secondary navy — grounding fills, hero */
  --vem-white:       #FFFFFF;
  --vem-gray:        #E5E6E8; /* dividers, quiet fills */

  /* Derived neutrals (tuned from the brand, no new hues) */
  --vem-ink:         #0B1F44; /* body text on light */
  --vem-gray-text:   #5B6172; /* muted captions/labels */
  --vem-navy-700:    #1A2750; /* between navy and dark */
  --vem-gold-soft:   #CBB279; /* lighter gold for hairlines on dark */
  --vem-blue:        #5C7CB8; /* reference-inspired accent blue */
  --vem-blue-soft:   #94ABD6; /* lighter blue for emphasis/text on navy */
  --vem-blue-deep:   #34518C; /* deeper blue for accent text on light (AA) */

  /* ---- ACCENT: flip these to switch the whole site gold ⇄ blue ----
     GOLD (current):  --accent: var(--vem-gold); etc.
     Revert to BLUE:  --accent: var(--vem-blue); --accent-soft: var(--vem-blue-soft);
                      --accent-deep: var(--vem-blue-deep); --accent-hover: #43649C; --accent-glow: rgba(92,124,184,0.45); */
  --accent:       var(--vem-gold);        /* fills, rules, overlines        */
  --accent-soft:  var(--vem-gold-soft);   /* lighter accent on dark         */
  --accent-deep:  #8A6E39;                /* accent text on light / buttons (AA) */
  --accent-hover: #C7A96B;                /* button hover (lighter gold)    */
  --accent-glow:  rgba(185, 155, 95, 0.45);

  /* On-dark text ramp (white at honest opacities — all AA on navy-dark) */
  --on-dark-100: rgba(255,255,255,0.98);
  --on-dark-80:  rgba(255,255,255,0.82);
  --on-dark-70:  rgba(255,255,255,0.74);
  --on-dark-60:  rgba(255,255,255,0.64);
  --on-dark-50:  rgba(255,255,255,0.54);
  --on-dark-40:  rgba(255,255,255,0.42);

  /* ---- Typography ------------------------------------------------- */
  --font-logo:    "Cinzel", Georgia, serif;          /* logo + sparse marquee */
  --font-display: "Cormorant", Georgia, serif;        /* headings */
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Modular scale — base 17px, ratio ~1.25 (major third-ish) */
  --fs-100: 0.78rem;   /* 12.5 — overline/labels */
  --fs-200: 0.875rem;  /* 14   — small */
  --fs-300: 1rem;      /* 16   */
  --fs-400: 1.0625rem; /* 17   — body base */
  --fs-500: 1.333rem;  /* ~21  — lead */
  --fs-600: 1.777rem;  /* ~28  */
  --fs-700: 2.369rem;  /* ~38  */
  --fs-800: 3.157rem;  /* ~50  */
  --fs-900: 4.209rem;  /* ~67  — hero display (fluid below) */

  /* Fluid hero size: scales 40px → 88px */
  --fs-hero: clamp(2.6rem, 1.4rem + 5.2vw, 5.5rem);

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.6;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.18em;  /* small caps / overlines */

  /* ---- Spacing — 8px scale --------------------------------------- */
  --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 / shadows ------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-card: 0 18px 40px -24px rgba(11,31,68,0.55);
  --shadow-cta:  0 10px 30px -10px rgba(185,155,95,0.45);

  /* ---- Layout ----------------------------------------------------- */
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 64px);

  /* ---- Motion ----------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* expo-out, for entrances */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 180ms;
  --dur-base: 220ms;   /* was referenced by gips.css/funnel.css but never defined — chevron/accordion transitions silently did nothing (invalid duration -> 0s) until this was added */
  --dur-mid:  280ms;
  --dur-slow: 900ms;

  /* Shared "shine" band for the site-wide hero-text sweep (see
     @keyframes vemGoldSweep below). A soft light highlight; consumers
     recolor the underlying text via background-color, not this gradient. */
  --shine-band: linear-gradient(105deg,
    transparent 38%, rgba(207,222,248,0.55) 47%, #EAF2FF 50%,
    rgba(207,222,248,0.55) 53%, transparent 62%);

  /* ---- z-index scale --------------------------------------------- */
  --z-base: 1;
  --z-hero-content: 20;
  --z-header: 50;
  --z-overlay: 80;
}

/* Reset-ish base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  color: var(--vem-ink);
  background: var(--vem-navy-dark);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible {
  outline: 2px solid var(--accent);   /* was var(--vem-gold) — bypassed the brochure's scoped
                                          blue override, leaking a gold ring onto ~38 focusable
                                          elements there on Tab. var(--accent) follows scope. */
  outline-offset: 3px;
  border-radius: 2px;
}

/* ===== Hero-text "shine" — single source of truth for the whole site =====
   One soft light band sweeps once across the gold/blue fill, then rests
   (off-screen at both loop ends, so the restart is invisible). Ration this:
   true hero/display headlines only — one or two signature moments per page,
   never section headings, buttons, or body copy. Consumers supply their own
   fill via background-color + var(--shine-band) and this shared timing
   curve; see css/hero.css .light-hero .hero__title em for the reference
   consumer, or css/brochure.css .bro-h em for a gated (on-reveal) one. */
@keyframes vemGoldSweep {
  0%   { background-position: 90% 0; }   /* band off the LEFT edge */
  45%  { background-position: 10% 0; }   /* swept across to off the RIGHT edge */
  100% { background-position: 10% 0; }   /* rest (solid fill) before looping */
}

/* ===== Buttons — single source of truth for every page ===== */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-200);
  letter-spacing: 0.01em;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  cursor: pointer; white-space: nowrap; border: 1px solid transparent; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-soft),
              background var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft);
}
.btn--gold { background: var(--accent-deep); color: #fff; box-shadow: 0 10px 30px -12px var(--accent-glow); }
.btn--gold:hover { background: var(--accent); transform: translateY(-1px); }
.btn--gold:active { transform: translateY(0) scale(0.99); }
.btn--ghost { background: rgba(255,255,255,0.06); color: var(--on-dark-100); border-color: rgba(255,255,255,0.30); }
.btn--ghost:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.55); }
.btn--sm { padding: 10px 18px; }

/* Tabular figures for any numbers/financial data */
.tnum { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}