/* ─────────────────────────────────────────────────────────────────
 * Ajaia Design System V2 — Tokens
 * Drop in via:  <link rel="stylesheet" href="colors_and_type.css">
 * ───────────────────────────────────────────────────────────────── */

/* Brand fonts — local files (variable-font woff2). */
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins.woff2") format("woff2-variations"),
       url("fonts/Poppins.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat.woff2") format("woff2-variations"),
       url("fonts/Montserrat.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter.woff2") format("woff2-variations"),
       url("fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("fonts/Fragment_Mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Color · Brand ── */
  --ink-900:        #001D6B;   /* Primary navy */
  --ink-800:        #052782;
  --ink-700:        #0B2E8E;   /* Hover lift */
  --ink-600:        #1B3FA3;
  --sky-500:        #6EA4E6;   /* Italic captions, mid accent */
  --sky-400:        #97C2F8;   /* Brand accent, CTAs */
  --sky-300:        #B6D4FA;
  --sky-200:        #D2E3FC;
  --sky-100:        #E1EEFF;   /* Tint */
  --sky-50:         #F1F7FF;   /* Faintest tint */
  --cream-100:      #FFFFE6;   /* Warm display accent — use sparingly */

  /* ── Color · Neutrals ── */
  --paper:          #FFFFFF;
  --paper-warm:     #F0EDE5;
  --ink-ink:        #1B1C1C;   /* Primary body on light */
  --ink-muted:      #272D3B;   /* Secondary on light */
  --ink-subtle:     #6B7280;   /* Caption / placeholder */
  --ink-faint:      #9AA3AF;
  --line-light:     rgba(0,0,0,0.08);
  --line-dark:      rgba(255,255,255,0.10);
  --surface-glass-dark:  rgba(0,0,0,0.60);
  --surface-glass-light: rgba(255,255,255,0.05);

  /* ── Color · Semantic ── */
  --fg-strong:      var(--ink-ink);
  --fg-default:     var(--ink-muted);
  --fg-subtle:      var(--ink-subtle);
  --fg-onbrand:     var(--paper);
  --fg-onbrand-subtle: var(--sky-100);
  --fg-accent:      var(--sky-400);
  --bg-page:        var(--paper);
  --bg-brand:       var(--ink-900);
  --bg-tint:        var(--sky-50);
  --bg-card:        var(--paper);
  --bg-card-dark:   rgba(151,194,247,0.11);
  --border-default: var(--line-light);
  --border-onbrand: var(--line-dark);

  /* ── Type · Family ── */
  --font-sans:  "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:  "Fragment Mono", "Inter", "SF Mono", ui-monospace, Menlo, monospace;
  --font-alt:   "Montserrat", "Poppins", sans-serif;   /* legacy display alternate */

  /* ── Type · Scale (px on 1920 frame) ── */
  --fs-display:  72px;
  --fs-h1:       52px;
  --fs-h2:       40px;
  --fs-h3:       30px;
  --fs-h4:       22px;
  --fs-h5:       18px;
  --fs-body-lg:  18px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-eyebrow:  13px;
  --fs-mono:     13px;

  /* ── Type · Leading ── */
  --lh-display:  1.06;
  --lh-h1:       1.10;
  --lh-h2:       1.18;
  --lh-h3:       1.26;
  --lh-h4:       1.36;
  --lh-body:     1.6;
  --lh-tight:    1.4;

  /* ── Type · Tracking ── */
  --tr-display:  -0.025em;
  --tr-h1:       -0.025em;
  --tr-h2:       -0.020em;
  --tr-h3:       -0.015em;
  --tr-h4:       -0.010em;
  --tr-h5:       -0.005em;
  --tr-body:     -0.002em;
  --tr-eyebrow:  0.12em;

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

  /* ── Radii ── */
  --r-0: 0;
  --r-1: 4px;
  --r-2: 10px;
  --r-3: 14px;
  --r-pill: 999px;

  /* ── Elevation ── */
  --shadow-1: 0 1px 2px rgba(0,29,107,0.06), 0 8px 24px -8px rgba(0,29,107,0.12);
  --shadow-2: 0 24px 60px -20px rgba(0,29,107,0.35);
  --shadow-ondark: 0 12px 40px -12px rgba(0,0,0,0.45);

  /* ── Motion ── */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 320ms;

  /* ── Layout ── */
  --gutter: 160px;
  --max-w:  1600px;
  --nav-h:  72px;
}

/* ─────────────────────────────────────────────────────────────────
 *  Base + Semantic type styles — apply by class when you don't want
 *  the raw tag style.
 * ───────────────────────────────────────────────────────────────── */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  color: var(--fg-strong);
  background: var(--bg-page);
  margin: 0;
  text-rendering: optimizeLegibility;
}

.display, h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  margin: 0;
}
.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
  margin: 0;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  margin: 0;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
  margin: 0;
}
.h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--tr-h4);
  margin: 0;
}
.h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h5);
  line-height: var(--lh-h4);
  letter-spacing: var(--tr-h5);
  margin: 0;
}
.body-lg, .lead {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  letter-spacing: var(--tr-body);
}
.body, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
}
.body-sm, small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  letter-spacing: var(--tr-body);
}
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  line-height: 1.5;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--sky-400);
}
.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono);
  line-height: 1.55;
  letter-spacing: 0;
}

/* On-brand reversed copy: when over --ink-900 */
.on-brand { color: var(--fg-onbrand); }
.on-brand .h1, .on-brand .h2 { color: var(--cream-100); }   /* warm display title */
.on-brand .h3 { color: var(--cream-100); }
.on-brand .eyebrow { color: var(--sky-400); }
.on-brand p, .on-brand .body { color: var(--paper); }
.on-brand .body-sm { color: var(--sky-100); }

/* Accent: section title in sky-400 (used in product pages) */
.h2.accent, .h1.accent { color: var(--sky-400); }