/* ============================================================
   SCOUT — Colors & Type
   Sources: assets/tokens/scout-design-tokens.css (canonical)
            reference/SCOUT_BRAND_BRIEF.md
   Companion to README.md.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ===== COLOR — Surfaces (dark, primary theme) ===== */
  --fg1: #e2e8f0;            /* text-primary on dark */
  --fg2: #94a3b8;            /* text-dim */
  --fg3: #5a6884;            /* text-faint (captions, eyebrow-faint) */
  --bg1: #0a0e1a;            /* page bg */
  --bg2: #111827;            /* surface, cards */
  --bg3: #1a2236;            /* elevated surface */
  --bg4: #232c44;            /* highest elevation */
  --border:        #2a3550;
  --border-bright: #3a4767;

  /* ===== COLOR — Light theme ===== */
  --paper:     #f5f4f0;
  --paper-2:   #ffffff;
  --ink:       #0a0e1a;
  --ink-dim:   #5a5a5a;

  /* ===== COLOR — Accent + State ===== */
  --accent:        #3b82f6;  /* Signal blue. The one accent. */
  --accent-2:      #8b5cf6;  /* purple — sparingly */
  --accent-3:      #06b6d4;  /* cyan  — sparingly */
  --success:       #10b981;
  --warning:       #f59e0b;
  --danger:        #ef4444;

  /* ===== TYPE — families ===== */
  --font-display: 'Geist', system-ui, -apple-system, sans-serif; /* @kind font */
  --font-body:    'Geist', system-ui, -apple-system, sans-serif; /* @kind font */
  --font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, monospace; /* @kind font */

  /* ===== TYPE — weights ===== */
  --w-light: 300; /* @kind font */
  --w-reg:   400; /* @kind font */
  --w-med:   500; /* @kind font */
  --w-semi:  600; /* @kind font */
  --w-bold:  700; /* @kind font */
  --w-ebold: 800; /* @kind font */            /* wordmark, headings */
  --w-black: 900; /* @kind font */

  /* ===== TYPE — scale ===== */
  --t-xs:   0.72rem; /* @kind font */         /* ~11.5px — eyebrows */
  --t-sm:   0.85rem; /* @kind font */         /* ~13.6px — captions */
  --t-base: 1rem; /* @kind font */            /* 16px    — body */
  --t-lg:   1.15rem; /* @kind font */         /* ~18.4px — lead */
  --t-xl:   1.5rem; /* @kind font */          /* 24px    — h4 */
  --t-2xl:  1.8rem; /* @kind font */          /* ~28.8px — h3 */
  --t-3xl:  2.4rem; /* @kind font */          /* ~38.4px — h2 */
  --t-4xl:  3.5rem; /* @kind font */          /* 56px    — h1 */
  --t-5xl:  4.5rem; /* @kind font */          /* 72px    — display / wordmark */

  /* ===== TYPE — tracking ===== */
  --trk-tight:   -0.04em; /* @kind font */    /* wordmark, h1 */
  --trk-normal:  -0.02em; /* @kind font */    /* headings */
  --trk-relaxed: 0; /* @kind font */          /* body */
  --trk-wide:    0.1em; /* @kind font */      /* mono labels */
  --trk-widest:  0.18em; /* @kind font */     /* eyebrows, taglines */

  /* ===== TYPE — leading ===== */
  --lh-none:    1; /* @kind font */
  --lh-tight:   1.2; /* @kind font */
  --lh-snug:    1.4; /* @kind font */
  --lh-normal:  1.6; /* @kind font */
  --lh-relaxed: 1.7; /* @kind font */

  /* ===== SPACING ===== */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ===== RADII ===== */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   14px;
  --r-2xl:  20px;
  --r-full: 9999px;

  /* ===== SHADOWS (dark-first; use sparingly) ===== */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.3);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.4);
  --glow:      0 0 24px rgba(59,130,246,0.25);

  /* ===== MOTION ===== */
  --dur-fast:   150ms; /* @kind other */
  --dur-normal: 250ms; /* @kind other */
  --dur-slow:   400ms; /* @kind other */
  --ease:       ease-out; /* @kind other */
}

/* ===== SEMANTIC TYPE CLASSES ===== */
/* The wordmark is Geist 800, all caps, -0.04em. Headings are Geist 700–800. */

.scout-wordmark,
h1.display {
  font-family: var(--font-display);
  font-weight: var(--w-ebold);
  font-size: var(--t-5xl);
  letter-spacing: var(--trk-tight);
  line-height: var(--lh-none);
  color: var(--fg1);
  text-transform: uppercase;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-ebold);
  font-size: clamp(40px, 7vw, var(--t-5xl));
  letter-spacing: var(--trk-tight);
  line-height: var(--lh-tight);
  color: var(--fg1);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--w-ebold);
  font-size: clamp(32px, 5vw, var(--t-4xl));
  letter-spacing: var(--trk-tight);
  line-height: var(--lh-tight);
  color: var(--fg1);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-2xl);
  letter-spacing: var(--trk-normal);
  line-height: var(--lh-snug);
  color: var(--fg1);
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: var(--t-xl);
  letter-spacing: var(--trk-normal);
  color: var(--fg1);
}

.lead {
  font-family: var(--font-body);
  font-weight: var(--w-reg);
  font-size: var(--t-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
  max-width: 640px;
}

p, .body {
  font-family: var(--font-body);
  font-weight: var(--w-reg);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  color: var(--fg1);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--fg3);
}

/* Eyebrow / tagline — mono, uppercase, very wide tracking */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--w-med);
  font-size: var(--t-xs);
  letter-spacing: var(--trk-widest);
  text-transform: uppercase;
  color: var(--fg3);
}

.eyebrow--accent {
  color: var(--accent);
}

/* Numeric tag (01, 02, 03 ...) used in pillars and how-it-works steps */
.num-tag {
  font-family: var(--font-mono);
  font-weight: var(--w-med);
  font-size: var(--t-xs);
  letter-spacing: var(--trk-wide);
  color: var(--accent);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  color: var(--fg1);
}

/* Selection — always signal blue */
::selection { background: rgba(59,130,246,0.35); color: #fff; }