/* ============================================================================
   Bardel - Design Tokens (SINGLE SOURCE OF TRUTH)
   FROZEN in Phase 1. No page agent may edit this file.
   styles.css and every page consume ONLY var(--token). Never hardcode hex.
   V3 foundation pass (spec-mandated, logged in ACTIONS-TAKEN.md): font-display
   fixed to loaded faces, contrast text-tokens added, em dashes removed.
   ============================================================================ */
:root {
  /* ---- Brand color (FROM THE BARDEL LOGO: navy #012654 + blue #0074FE ONLY) ---- */
  --navy:            #012654;   /* primary canvas / ink (logo navy) */
  --navy-lockup:     #0A2451;   /* logo-lockup variant */
  --navy-deep:       #01183A;   /* near-black tech-credibility sections */
  --blue:            #0074FE;   /* BRAND blue (logo): primary accent + CTA + charts */
  --blue-soft:       #3B8DFF;   /* lighter brand blue for charts/secondary */
  --teal:            #0074FE;   /* legacy token -> mapped to brand blue (NO teal in brand) */
  --teal-bright:     #3B8DFF;   /* legacy token -> mapped to lighter brand blue */
  --green:           #0074FE;   /* legacy "positive" token -> mapped to brand blue (NO green in brand) */

  /* ---- Text-only accent tokens for LIGHT backgrounds (AA >=4.5:1) ---- */
  --teal-text:       #0A5AC2;   /* brand blue as small text on white (AA-safe ~6:1) */
  --green-text:      #0A5AC2;   /* legacy positive small-text -> brand blue (AA-safe) */

  /* ---- Neutrals ---- */
  --white:           #FFFFFF;
  --ink:             #1A1A1A;
  --slate-700:       #334155;
  --slate-500:       #64748B;
  --slate-400:       #94A3B8;
  --surface:         #F6F8FB;   /* light section bg */
  --surface-2:       #EEF3F9;
  --border:          #E2E8F0;
  --border-dark:     rgba(255,255,255,.12);

  /* ---- Semantic ---- */
  --bg:              var(--white);
  --bg-dark:         var(--navy-deep);
  --text:            var(--ink);
  --text-on-dark:    #E7EEF7;
  --text-muted:      #5B6B82;   /* darkened from slate-500: clears 4.5:1 on white/surface/surface-2 */
  --text-muted-dark: #9DB2CC;   /* verified 6.2:1 on navy, 7.9:1 on navy-deep */
  --accent:          var(--teal);
  --cta:             var(--blue);

  /* ---- Type ---- */
  --font-display: "Inter Tight","Inter",system-ui,-apple-system,sans-serif;
  --font-body:    "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:   "Newsreader",Georgia,"Times New Roman",serif; /* science pull-quotes only */
  /* Fluid scale (clamp: min, vw, max) */
  --fs-hero:  clamp(2.75rem, 7.5vw, 6.75rem);
  --fs-h1:    clamp(2.25rem, 5vw, 4rem);
  --fs-h2:    clamp(1.75rem, 3.5vw, 2.75rem);
  --fs-h3:    clamp(1.25rem, 2vw, 1.55rem);
  --fs-lg:    1.25rem;
  --fs-body:  1.0625rem;
  --fs-sm:    0.875rem;
  --fs-xs:    0.75rem;
  --fs-eyebrow: 0.8125rem;
  --lh-tight: 1.04;
  --lh-snug:  1.2;
  --lh-body:  1.62;
  --tracking-tight:   -0.02em;
  --tracking-tighter: -0.035em;
  --tracking-eyebrow:  0.14em;

  /* ---- Spacing (8pt) ---- */
  --space-xs: .5rem;  --space-sm: .75rem; --space-md: 1rem;
  --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem;
  --space-3xl: 6.5rem;
  --space-section: clamp(4rem, 10vw, 9rem);
  --max-width: 1200px;
  --max-narrow: 880px;
  --measure: 64ch;
  --nav-h: 72px;

  /* ---- Radii / shadow ---- */
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 32px; --radius-full: 999px;
  --shadow-sm: 0 1px 3px rgba(1,38,84,.10);
  --shadow-md: 0 10px 34px rgba(1,38,84,.12);
  --shadow-lg: 0 28px 64px rgba(1,24,58,.22);
  --shadow-glow: 0 0 48px rgba(0,116,254,.30);
  --shadow-teal-glow: 0 0 48px rgba(0,116,254,.30);

  /* ---- Motion ---- */
  --dur-fast: .25s; --dur-mid: .6s; --dur-slow: 1.1s;
  --ease-out: cubic-bezier(.16,1,.3,1);     /* signature reveal ease */
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --reveal-y: 28px;

  /* ---- Layout helpers ---- */
  --grad-hero: radial-gradient(120% 120% at 70% 0%, #0A3E86 0%, var(--navy) 42%, var(--navy-deep) 100%);
  --grad-cta:  linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast:.01ms; --dur-mid:.01ms; --dur-slow:.01ms; --reveal-y:0px; }
}