/* ============================================================
   AI LEADERSHIP COMPASS — Core tokens: color + type
   Warm, editorial, executive. Cream paper · sepia ink · brass gold.
   Fonts: Spectral (display serif), Mulish (UI sans), IBM Plex Mono.
   Load fonts via Google Fonts (see fonts/README.md).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- BRAND COLOR ---------- */
  /* Brass / north-star gold — the single hero accent */
  --gold-bright:  #F0D070;   /* star highlight */
  --gold:         #C99A3C;   /* PRIMARY accent */
  --gold-600:     #B5862C;   /* hover / pressed */
  --gold-deep:    #8A6520;   /* deep brass, on light */
  --gold-tint:    #F4ECD8;   /* faint brass wash for fills */

  /* ---------- INK (warm sepia neutrals) ---------- */
  --ink:        #211B14;   /* near-black warm — primary text */
  --ink-soft:   #4B4135;   /* the logo line color — secondary text */
  --ink-muted:  #8C8173;   /* tertiary / captions / labels */
  --ink-faint:  #B6AC9C;   /* disabled / placeholder */

  /* ---------- PAPER (warm backgrounds) ---------- */
  --paper:      #FAF6EF;   /* page background — warm cream */
  --paper-2:    #F3ECE0;   /* raised panel / alt section */
  --paper-3:    #ECE3D4;   /* deeper inset */
  --white:      #FFFFFF;   /* cards on paper */

  /* ---------- DARK SURFACE (warm near-black) ---------- */
  --night:      #1C1710;   /* dark sections / footer */
  --night-2:    #2A231A;   /* raised on night */
  --night-line: #3C3326;   /* hairline on night */
  --on-night:   #F1E9DB;   /* text on night */
  --on-night-muted: #A99C86;

  /* ---------- LINES & STROKES ---------- */
  --line:       #E4DBCB;   /* hairline rule / card border */
  --line-strong:#D2C7B2;   /* stronger divider */

  /* ---------- SEMANTIC (used sparingly) ---------- */
  --positive:   #5E7748;   /* sage green */
  --positive-tint: #EAEEE0;
  --alert:      #A8533A;   /* terracotta */
  --alert-tint: #F3E4DD;
  --info:       #4B5E6E;   /* slate */
  --info-tint:  #E4E9ED;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Spectral', 'Iowan Old Style', Georgia, serif;
  --font-sans:    'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE (fluid-ish, rem) ---------- */
  --t-display:  4.25rem;   /* 68px — hero serif */
  --t-h1:       3rem;      /* 48px */
  --t-h2:       2.125rem;  /* 34px */
  --t-h3:       1.5rem;    /* 24px */
  --t-h4:       1.1875rem; /* 19px */
  --t-body-lg:  1.1875rem; /* 19px */
  --t-body:     1.0625rem; /* 17px */
  --t-small:    0.9375rem; /* 15px */
  --t-caption:  0.8125rem; /* 13px */
  --t-kicker:   0.75rem;   /* 12px — tracked caps label */

  --lh-tight:   1.08;
  --lh-snug:    1.25;
  --lh-body:    1.6;

  /* tracked-caps label tracking (the brand signature) */
  --track-kicker: 0.22em;
  --track-caps:   0.08em;

  /* ---------- SPACING (4px base) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  /* ---------- RADII (restrained / editorial) ---------- */
  --r-xs: 3px;  --r-sm: 6px;  --r-md: 10px; --r-lg: 16px; --r-pill: 999px;

  /* ---------- SHADOWS (soft, warm-tinted) ---------- */
  --shadow-xs: 0 1px 2px rgba(33,27,20,.05);
  --shadow-sm: 0 1px 3px rgba(33,27,20,.06), 0 1px 2px rgba(33,27,20,.04);
  --shadow-md: 0 4px 14px rgba(33,27,20,.07), 0 2px 5px rgba(33,27,20,.04);
  --shadow-lg: 0 18px 48px rgba(33,27,20,.12), 0 6px 16px rgba(33,27,20,.06);
  --shadow-gold: 0 6px 22px rgba(201,154,60,.28);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: 220ms;
  --dur-slow: 420ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

.kicker {
  font-family: var(--font-sans);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--gold-deep);
}

.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--ink);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--ink);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--ink-soft);
}

.body-lg {
  font-family: var(--font-sans);
  font-size: var(--t-body-lg);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

.small  { font-family: var(--font-sans); font-size: var(--t-small); line-height: 1.5; color: var(--ink-muted); }
.caption{ font-family: var(--font-sans); font-size: var(--t-caption); line-height: 1.45; color: var(--ink-muted); }

/* Editorial serif lead / pull quote */
.lead {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.45;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-soft);
}

/* Mono — tokens, kickers, metadata */
.mono {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

/* Big editorial index number (01 / 02 …) */
.index-num {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 300;
  line-height: 1;
  color: var(--gold);
  font-feature-settings: "lnum" 1;
}