/* ─────────────────────────────────────────────────────────────
   Pivot Pulse Design System — colors_and_type.css
   Shared tokens for Pivot Training, PressureIQ, BurnoutIQ.
   Source of truth for color, type, spacing, elevation, radii.
   ───────────────────────────────────────────────────────────── */

/* Fonts — all available on Google Fonts, no substitutions needed.
   Load in HTML via:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
*/

:root {
  /* ───── Color: neutral / surface ───── */
  --ink:             #0B1220;   /* primary text, dark surfaces */
  --ink-faint:       #4B5563;   /* secondary text */
  --ink-faintest:    #8A93A2;   /* tertiary text, eyebrows */
  --paper:           #FAFAF7;   /* page background — warm white, NOT cold */
  --line:            #E6E2D9;   /* hairline borders */
  --line-faint:      #F0EDE5;   /* divider lines */
  --surface:         #FFFFFF;   /* cards, modals */
  --surface-sunken:  #F5F3EC;   /* inset panels */

  /* ───── Color: ember (primary accent — burn / pressure) ───── */
  --ember-50:   #FFF8EC;
  --ember-100:  #FEF3C7;
  --ember-200:  #FDE68A;
  --ember-300:  #FCD34D;
  --ember-400:  #FBBF24;
  --ember-500:  #F59E0B;        /* highlight / tip-of-flame */
  --ember-600:  #D97706;        /* PRIMARY ACCENT — use for CTAs, focus, links on paper */
  --ember:      #D97706;        /* alias */
  --ember-700:  #B45309;        /* dim burn — deep ember */
  --ember-800:  #92400E;
  --ember-900:  #78350F;

  /* ───── Color: state / band ───── */
  --heat:       #DC2626;        /* critical band — intervene now */
  --warning:    #B8862A;        /* warning band */
  --gold:       #8B6914;        /* reduced efficacy */
  --teal:       #0D9488;        /* recovery / healthy */
  --teal-50:    #F0FDFA;
  --teal-100:   #CCFBF1;
  --teal-700:   #0F766E;

  /* ───── Color: dimension hues (6 validated dimensions) ───── */
  --dim-ex:     #DC2626;        /* Exhaustion */
  --dim-md:     #D97706;        /* Mental Distance */
  --dim-ci:     #B45309;        /* Cognitive Impairment */
  --dim-ed:     #B8862A;        /* Emotional Dysregulation */
  --dim-re:     #8B6914;        /* Reduced Efficacy */
  --dim-rc:     #0D9488;        /* Recovery Capacity */

  /* ───── Type families ───── */
  --font-display:  'Fraunces', Georgia, 'Times New Roman', serif;
  --font-headline: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:     'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ───── Type scale (fluid-ish, rem-based) ───── */
  --fs-hero:       clamp(2.5rem, 5vw, 3.75rem);   /* 40–60px */
  --fs-h1:         clamp(2rem, 3.5vw, 2.75rem);   /* 32–44 */
  --fs-h2:         clamp(1.5rem, 2.5vw, 2rem);    /* 24–32 */
  --fs-h3:         1.25rem;                        /* 20 */
  --fs-h4:         1.125rem;                       /* 18 */
  --fs-body:       1rem;                           /* 16 */
  --fs-small:      0.875rem;                       /* 14 */
  --fs-xs:         0.75rem;                        /* 12 */
  --fs-eyebrow:    0.6875rem;                      /* 11 — uppercase eyebrows */

  /* ───── Letter spacing ───── */
  --tracking-tight:   -0.02em;      /* display headlines */
  --tracking-snug:    -0.01em;      /* h1–h3 */
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-eyebrow: 0.2em;        /* UPPERCASE EYEBROWS — 0.18 to 0.22 only */

  /* ───── Line height ───── */
  --lh-tight:   1.05;               /* hero */
  --lh-snug:    1.15;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ───── Spacing (4px base unit) ───── */
  --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-sm:     6px;             /* tags, chips */
  --radius-btn:    10px;            /* buttons 8–10 */
  --radius-input:  10px;
  --radius-card:   18px;            /* cards 16–20 */
  --radius-card-lg:20px;
  --radius-modal:  28px;            /* hero/modal */
  --radius-pill:   999px;           /* ONLY eyebrow tags */

  /* ───── Elevation (restrained) ───── */
  --shadow-rest:    0 1px 2px rgba(0,0,0,0.04);
  --shadow-hover:   0 8px 24px rgba(11,18,32,0.08);
  --shadow-focus:   0 0 0 3px rgba(217,119,6,0.25);
  --shadow-dark:    0 1px 2px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.25);

  /* ───── Motion ───── */
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    160ms;
  --dur-normal:  280ms;
  --dur-slow:    700ms;
  --dur-ring:    1200ms;            /* score rings ease in */

  /* ───── Z ───── */
  --z-nav:    40;
  --z-modal:  80;
}

/* ─────────────────────────────────────────────────────────────
   Base
   ───────────────────────────────────────────────────────────── */
html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─────────────────────────────────────────────────────────────
   Semantic type classes — drop on any element.
   ───────────────────────────────────────────────────────────── */
.type-hero {
  font-family: var(--font-display);
  font-weight: 500;                 /* Fraunces looks best 400–600 for hero */
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.type-hero em {
  font-style: italic;
  color: var(--ember-700);
  font-variation-settings: "opsz" 144, "SOFT" 50;
}

.type-h1 {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}
.type-h2 {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}
.type-h3 {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.3;
}
.type-h4 {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.35;
}
.type-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--ink-faint);
}
.type-lead {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: var(--lh-relaxed);
  color: var(--ink-faint);
  max-width: 62ch;
}
.type-small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--ink-faint);
}
.type-eyebrow {
  font-family: var(--font-headline);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-faintest);
}
.type-eyebrow-ember { color: var(--ember-700); }
.type-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0;
}
.type-numeric {
  font-family: var(--font-headline);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.type-archetype {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

/* ─────────────────────────────────────────────────────────────
   Reduced motion
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}