/* ─────────────────────────────────────────────────────────
   Beltra — Colors & Type
   Source: Design System/Brand Guidelines, Beltra.pdf
   Pairing: Elegant & Readable (Faustina + Inter)
   Funnel Display is reserved for the wordmark/logo only.
   ───────────────────────────────────────────────────────── */

/* Funnel Display — LOGO/WORDMARK ONLY. Do not use for UI or body copy. */
@font-face { font-family:'Funnel Display'; src:url('./fonts/FunnelDisplay-VariableFont_wght.ttf') format('truetype-variations'); font-weight:300 800; font-display:swap; }
@font-face { font-family:'Funnel Display'; src:url('./fonts/FunnelDisplay-Bold.ttf')     format('truetype'); font-weight:700; font-display:swap; }

/* Faustina — elegant slab-serif display. Headlines, hero, editorial moments. */
@font-face { font-family:'Faustina'; src:url('./fonts/Faustina-Variable.ttf') format('truetype-variations'); font-weight:300 800; font-display:swap; }
@font-face { font-family:'Faustina'; src:url('./fonts/Faustina-Italic-Variable.ttf') format('truetype-variations'); font-weight:300 800; font-style:italic; font-display:swap; }
@font-face { font-family:'Faustina'; src:url('./fonts/Faustina-Regular.ttf')  format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Faustina'; src:url('./fonts/Faustina-Medium.ttf')   format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Faustina'; src:url('./fonts/Faustina-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Faustina'; src:url('./fonts/Faustina-Bold.ttf')     format('truetype'); font-weight:700; font-display:swap; }

/* Inter — workhorse UI + body copy. Highly readable at any size. */
@font-face { font-family:'Inter'; src:url('./fonts/Inter-Variable.ttf') format('truetype-variations'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'Inter'; src:url('./fonts/Inter-Italic-Variable.ttf') format('truetype-variations'); font-weight:100 900; font-style:italic; font-display:swap; }
@font-face { font-family:'Inter'; src:url('./fonts/Inter-Regular.ttf')  format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('./fonts/Inter-Medium.ttf')   format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Inter'; src:url('./fonts/Inter-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Inter'; src:url('./fonts/Inter-Bold.ttf')     format('truetype'); font-weight:700; font-display:swap; }

:root {
  /* ── PRIMARY (from brand PDF) ── */
  --base:  #1F2747;   /* primary brand · CTAs, wordmark, key moments */
  --dark:  #1F2937;   /* text, borders, high-read */
  --white: #FFFFFF;

  /* ── SECONDARY RAMP (from brand PDF, indigo tints of --base) ── */
  --color-100: #CAD0E8;
  --color-200: #A6B0D8;
  --color-300: #8391C9;
  --color-400: #5F71B9;
  --color-500: #4658A0;
  --color-600: #36447C;
  --color-700: var(--base);

  /* Legacy navy aliases — keep existing components working */
  --navy-900: var(--dark);
  --navy-800: var(--base);
  --navy-700: var(--color-600);
  --navy-600: var(--color-500);
  --navy-500: var(--color-400);
  --navy-400: var(--color-300);
  --navy-300: var(--color-200);
  --navy-200: var(--color-100);
  --navy-100: #E4E8F2;
  --navy-50:  #F1F3F9;

  /* ── Neutrals ── cool grays to sit cleanly with indigo */
  --gray-50:  #F7F8FB;
  --gray-100: #EEF0F5;
  --gray-200: #DFE2EB;
  --gray-300: #C4C9D6;
  --gray-400: #969CAD;
  --gray-500: #6A7183;
  --gray-600: #484E5E;
  --gray-700: #2F3441;
  --gray-800: var(--dark);

  /* ── Semantic — mapped to navy ramp, no green/amber/red ── */
  --ok:    var(--color-500);   --ok-bg:   var(--navy-50);
  --warn:  var(--gray-500);    --warn-bg: var(--gray-100);
  --err:   var(--gray-600);    --err-bg:  var(--gray-100);

  /* Legacy semantic aliases */
  --blue-500:  var(--color-500);
  --blue-400:  var(--color-400);
  --blue-100:  var(--color-100);
  --green-500: var(--ok);
  --green-100: var(--ok-bg);
  --amber-500: var(--warn);
  --amber-100: var(--warn-bg);
  --red-500:   var(--err);
  --red-100:   var(--err-bg);

  /* ── Foreground / background tokens ── */
  --fg-1: var(--dark);
  --fg-2: var(--color-700);
  --fg-3: var(--gray-600);
  --fg-4: var(--gray-500);
  --fg-5: var(--gray-400);
  --fg-inverse: var(--white);

  --bg-app:     var(--white);
  --bg-surface: var(--white);
  --bg-sunken:  var(--gray-50);
  --bg-brand:   var(--base);
  --bg-brand-2: var(--dark);

  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--color-500);

  --link:       var(--color-700);
  --link-hover: var(--color-600);
  --focus-ring: 0 0 0 3px var(--color-100);

  /* ── Spacing ── */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;
  --space-9:48px; --space-10:64px; --space-11:80px; --space-12:96px;

  /* ── Radii ── */
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-full:9999px;

  /* ── Shadows (tinted with Base) ── */
  --shadow-sm: 0 1px 3px rgba(31,39,71,.06), 0 1px 2px rgba(31,39,71,.04);
  --shadow-md: 0 4px 12px rgba(31,39,71,.08), 0 2px 4px rgba(31,39,71,.04);
  --shadow-lg: 0 12px 32px rgba(31,39,71,.10), 0 4px 8px rgba(31,39,71,.04);
  --shadow-xl: 0 24px 56px rgba(31,39,71,.14), 0 8px 16px rgba(31,39,71,.06);

  /* ── Type families ──
     --font-display  → Faustina (elegant serif, editorial headlines)
     --font-sans     → Inter (UI, body, buttons, forms)
     --font-logo     → Funnel Display (wordmark only, never UI)
  */
  --font-display: 'Faustina', 'Georgia', 'Times New Roman', serif;
  --font-sans:    'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-logo:    'Funnel Display', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'SF Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* ── Type scale — display/headings use Faustina (serif) ── */
  --fs-display:56px; --fw-display:600; --lh-display:1.05; --ls-display:-1.5px;
  --fs-h1:40px;  --fw-h1:600;  --lh-h1:1.15; --ls-h1:-1px;
  --fs-h2:30px;  --fw-h2:600;  --lh-h2:1.25; --ls-h2:-.5px;
  --fs-h3:24px;  --fw-h3:600;  --lh-h3:1.35; --ls-h3:-.3px;
  --fs-h4:19px;  --fw-h4:600;  --lh-h4:1.4;  --ls-h4:-.2px;
  --fs-body:16px; --fw-body:400; --lh-body:1.55; --ls-body:0;
  --fs-body-sm:14px; --lh-body-sm:1.5;
  --fs-caption:12px; --fw-caption:500; --ls-caption:.2px;
  --fs-overline:11px; --fw-overline:600; --ls-overline:1.5px;

  --ease-out: cubic-bezier(.2,.7,.2,1);
  --dur-fast:120ms; --dur-base:180ms; --dur-slow:260ms;
}

/* ── Base styles ── */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); background: var(--bg-app); }

h1,.h1,h2,.h2,h3,.h3,h4,.h4,.display { font-family: var(--font-display); color: var(--fg-1); }
h1,.h1 { font-size: var(--fs-h1); font-weight: var(--fw-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2,.h2 { font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3,.h3 { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h4,.h4 { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
.display { font-size: var(--fs-display); font-weight: var(--fw-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }

.wordmark { font-family: var(--font-logo); font-weight: 700; letter-spacing: -.02em; }

.eyebrow, .overline {
  font-family: var(--font-sans); font-size: var(--fs-overline); font-weight: var(--fw-overline);
  letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--color-600);
}