/* ============================================================
   THE EXPONENTIAL AGENCY — Design Tokens
   Colours, type, spacing, elevation, motion
   v1.1 — March 2026
   ============================================================ */

/* --- Webfonts (substituted from Google Fonts — both are the originals) --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ── CORE PALETTE ─────────────────────────────────────── */
  --tea-purple-night:  #0F0220;   /* Foundation — authority */
  --tea-purple-brand:  #6B21A8;   /* Primary brand */
  --tea-magenta:       #D946EF;   /* Energy accent */
  --tea-cyan:          #06B6D4;   /* Optimism / forward motion */

  /* ── PURPLE SCALE ─────────────────────────────────────── */
  --tea-purple-50:  #EDE9FE;
  --tea-purple-100: #DDD6FE;
  --tea-purple-200: #C4B5FD;
  --tea-purple-300: #C084FC;
  --tea-purple-400: #A855F7;
  --tea-purple-500: #9333EA;
  --tea-purple-600: #7E22CE;
  --tea-purple-700: #6B21A8;
  --tea-purple-800: #581C87;
  --tea-purple-900: #2D0958;
  --tea-purple-950: #0F0220;

  /* ── CYAN SCALE ───────────────────────────────────────── */
  --tea-cyan-50:  #ECFEFF;
  --tea-cyan-100: #CFFAFE;
  --tea-cyan-200: #A5F3FC;
  --tea-cyan-300: #67E8F9;
  --tea-cyan-400: #22D3EE;
  --tea-cyan-500: #06B6D4;
  --tea-cyan-600: #0891B2;
  --tea-cyan-700: #0E7490;
  --tea-cyan-900: #164E63;

  /* ── ACCENTS ──────────────────────────────────────────── */
  --tea-magenta-400: #E879F9;
  --tea-magenta-500: #D946EF;
  --tea-magenta-600: #C026D3;
  --tea-pink-500:    #EC4899;

  /* ── NEUTRALS ─────────────────────────────────────────── */
  --tea-white:       #FFFFFF;
  --tea-off-white:   #F8F6FF;
  --tea-lavender:    #F3EEFF;
  --tea-slate-200:   #E2D9F3;
  --tea-slate-300:   #CBD5E1;
  --tea-slate-400:   #94A3B8;
  --tea-slate-500:   #64748B;
  --tea-slate-600:   #475569;
  --tea-slate-700:   #334155;
  --tea-slate-800:   #1E293B;
  --tea-ink:         #1E0535;   /* body copy on light */

  /* ── FUNCTIONAL ───────────────────────────────────────── */
  --tea-success: #10B981;
  --tea-warning: #F59E0B;
  --tea-error:   #EF4444;

  /* ── SEMANTIC (LIGHT) ─────────────────────────────────── */
  --bg:        var(--tea-off-white);
  --bg-card:   #FFFFFF;
  --bg-muted:  var(--tea-lavender);
  --fg1:       var(--tea-ink);       /* primary text */
  --fg2:       var(--tea-slate-500); /* secondary text */
  --fg3:       var(--tea-slate-400); /* tertiary */
  --border:    var(--tea-slate-200);
  --accent:    var(--tea-purple-brand);
  --accent-fg: #FFFFFF;

  /* ── SEMANTIC (DARK / BRAND SURFACES) ─────────────────── */
  --bg-dark:        var(--tea-purple-night);
  --bg-dark-2:      var(--tea-purple-900);
  --fg1-on-dark:    #FFFFFF;
  --fg2-on-dark:    rgba(255,255,255,.70);
  --fg3-on-dark:    rgba(255,255,255,.40);
  --border-on-dark: rgba(255,255,255,.10);

  /* ── BRAND GRADIENTS ──────────────────────────────────── */
  --grad-spectrum: linear-gradient(135deg, #0F0220 0%, #2D0958 22%, #6B21A8 48%, #D946EF 76%, #06B6D4 100%);
  --grad-spectrum-text: linear-gradient(130deg, #9333EA 0%, #D946EF 50%, #22D3EE 100%);
  --grad-purple-depth: linear-gradient(160deg, #0F0220 0%, #2D0958 60%, #581C87 100%);
  --grad-transition-arc: linear-gradient(135deg, #EDE9FE 0%, #C4B5FD 50%, #A5F3FC 100%);
  --grad-lavender-sky: linear-gradient(170deg, #F8F6FF 0%, #EDE9FE 60%, #CFFAFE 100%);
  --grad-magenta-cyan: linear-gradient(120deg, #D946EF 0%, #06B6D4 100%);
  --grad-purple-cyan: linear-gradient(120deg, #6B21A8 0%, #06B6D4 100%);

  /* Text-on-image protection */
  --overlay-dark: linear-gradient(180deg, rgba(15,2,32,.0) 30%, rgba(15,2,32,.65) 100%);

  /* ── TYPOGRAPHY ───────────────────────────────────────── */
  --font-sans:    'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Fluid-friendly type scale (px-based, matches brand guidelines) */
  --fs-display:   52px;  --lh-display:   1.04;  --ls-display:   -0.03em;
  --fs-h1:        38px;  --lh-h1:        1.08;  --ls-h1:        -0.025em;
  --fs-h2:        26px;  --lh-h2:        1.18;  --ls-h2:        -0.02em;
  --fs-h3:        19px;  --lh-h3:        1.30;  --ls-h3:        -0.01em;
  --fs-body-lg:   18px;  --lh-body-lg:   1.65;
  --fs-body:      16px;  --lh-body:      1.70;
  --fs-body-sm:   14px;  --lh-body-sm:   1.60;
  --fs-caption:   12px;  --lh-caption:   1.55;
  --fs-label:     11px;  --lh-label:     1.40;   --ls-label:    0.20em;
  --fs-mono:      13px;  --lh-mono:      1.50;

  /* ── SPACING (8pt grid, with a tight 4pt half-step) ──── */
  --space-0:  0;
  --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;

  /* ── RADII ────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;   /* standard card */
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ── ELEVATION ───────────────────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(15,2,32,.06);
  --shadow-sm:   0 2px 6px rgba(15,2,32,.06), 0 1px 2px rgba(15,2,32,.04);
  --shadow-md:   0 8px 24px rgba(15,2,32,.08), 0 2px 6px rgba(15,2,32,.05);
  --shadow-lg:   0 20px 48px rgba(15,2,32,.12), 0 6px 14px rgba(15,2,32,.06);
  --shadow-xl:   0 32px 80px rgba(15,2,32,.18);
  --shadow-brand: 0 20px 40px -8px rgba(107,33,168,.45);
  --shadow-glow-magenta: 0 0 48px rgba(217,70,239,.35);
  --shadow-glow-cyan:    0 0 48px rgba(6,182,212,.30);

  /* ── MOTION ───────────────────────────────────────────── */
  --ease-standard:  cubic-bezier(.2,.7,.2,1);
  --ease-entrance:  cubic-bezier(.16,1,.3,1);      /* quint out */
  --ease-exit:      cubic-bezier(.7,0,.84,0);
  --dur-fast:   140ms;
  --dur-med:    240ms;
  --dur-slow:   420ms;

  /* ── BLUR / GLASS ─────────────────────────────────────── */
  --blur-subtle: 8px;
  --blur-heavy: 24px;
}

/* ============================================================
   SEMANTIC TEXT STYLES (classes + element defaults)
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  color: var(--fg1);
  background: var(--bg);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tea-display, h1.tea-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg1);
}

h1, .tea-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--fg1);
}

h2, .tea-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--fg1);
}

h3, .tea-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--fg1);
}

p, .tea-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg1);
  text-wrap: pretty;
}

.tea-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.tea-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--fg2); }
.tea-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg2); }

.tea-label, .tea-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--tea-purple-brand);
}

.tea-mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
}

/* Gradient headline treatment (use sparingly — hero only) */
.tea-gradient-text {
  background: var(--grad-spectrum-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Source-attribution line (mandatory on charts & data slides) */
.tea-source {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg2);
  letter-spacing: 0.01em;
}
.tea-source::before { content: "Source: "; opacity: .6; }