/* ============================================================
   SCOUT — Design Tokens v1.0
   May 2026
   Use these CSS custom properties as the single source of truth
   for all brand styling across the website.
   ============================================================ */

:root {
  /* ===== BRAND COLORS ===== */

  /* Surfaces — Dark theme (primary) */
  --scout-bg:           #0a0e1a;  /* Page background */
  --scout-surface:      #111827;  /* Cards, panels */
  --scout-surface-2:    #1a2236;  /* Elevated cards */
  --scout-surface-3:    #232c44;  /* Highest elevation */
  --scout-border:       #2a3550;  /* Default borders */
  --scout-border-bright:#3a4767;  /* Hover borders */

  /* Surfaces — Light theme (secondary) */
  --scout-paper:        #f5f4f0;  /* Light page background */
  --scout-paper-2:      #ffffff;  /* Light cards */
  --scout-ink:          #0a0e1a;  /* Text on light */

  /* Text */
  --scout-text:         #e2e8f0;  /* Primary text on dark */
  --scout-text-dim:     #94a3b8;  /* Secondary text */
  --scout-text-faint:   #5a6884;  /* Tertiary, captions */
  --scout-text-light:   #0a0e1a;  /* Primary text on light */
  --scout-text-light-dim:#5a5a5a; /* Secondary text on light */

  /* Accents — Use sparingly. Signal blue is the primary accent. */
  --scout-accent:       #3b82f6;  /* Primary signal blue (the dot) */
  --scout-accent-2:     #8b5cf6;  /* Secondary purple */
  --scout-accent-3:     #06b6d4;  /* Tertiary cyan */

  /* State colors */
  --scout-success:      #10b981;  /* Active, completed */
  --scout-warning:      #f59e0b;  /* Alert, attention */
  --scout-danger:       #ef4444;  /* Error, blocked */

  /* ===== TYPOGRAPHY ===== */

  /* Font families */
  --scout-font-display: 'Geist', system-ui, -apple-system, sans-serif;
  --scout-font-body:    'Geist', system-ui, -apple-system, sans-serif;
  --scout-font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Font weights — Geist supports 100-900 */
  --scout-weight-light:    300;
  --scout-weight-regular:  400;
  --scout-weight-medium:   500;
  --scout-weight-semibold: 600;
  --scout-weight-bold:     700;
  --scout-weight-extrabold:800;  /* Wordmark weight */
  --scout-weight-black:    900;

  /* Type scale */
  --scout-text-xs:    0.72rem;   /* 11.5px — eyebrows, labels */
  --scout-text-sm:    0.85rem;   /* 13.6px — captions */
  --scout-text-base:  1rem;      /* 16px   — body */
  --scout-text-lg:    1.15rem;   /* 18.4px — lead */
  --scout-text-xl:    1.5rem;    /* 24px   — h4 */
  --scout-text-2xl:   1.8rem;    /* 28.8px — h3 */
  --scout-text-3xl:   2.4rem;    /* 38.4px — h2 */
  --scout-text-4xl:   3.5rem;    /* 56px   — h1 */
  --scout-text-5xl:   4.5rem;    /* 72px   — display */

  /* Letter spacing — Wordmark uses -0.04em, headings -0.02em */
  --scout-tracking-tight:    -0.04em;  /* Wordmark, large headings */
  --scout-tracking-normal:   -0.02em;  /* Body headings */
  --scout-tracking-relaxed:  0;        /* Body copy */
  --scout-tracking-wide:     0.1em;    /* Mono labels */
  --scout-tracking-widest:   0.18em;   /* Eyebrows, taglines */

  /* Line heights */
  --scout-leading-none:    1;
  --scout-leading-tight:   1.2;
  --scout-leading-snug:    1.4;
  --scout-leading-normal:  1.6;
  --scout-leading-relaxed: 1.7;

  /* ===== SPACING ===== */

  --scout-space-1:  4px;
  --scout-space-2:  8px;
  --scout-space-3:  12px;
  --scout-space-4:  16px;
  --scout-space-5:  20px;
  --scout-space-6:  24px;
  --scout-space-8:  32px;
  --scout-space-10: 40px;
  --scout-space-12: 48px;
  --scout-space-16: 64px;
  --scout-space-20: 80px;
  --scout-space-24: 96px;

  /* ===== RADII ===== */

  --scout-radius-sm:  4px;
  --scout-radius-md:  8px;
  --scout-radius-lg:  12px;
  --scout-radius-xl:  14px;
  --scout-radius-2xl: 20px;
  --scout-radius-full:9999px;

  /* ===== SHADOWS (use sparingly on dark) ===== */

  --scout-shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
  --scout-shadow-md: 0 8px 24px rgba(0,0,0,0.3);
  --scout-shadow-lg: 0 16px 48px rgba(0,0,0,0.4);
  --scout-glow:      0 0 24px rgba(59,130,246,0.25);

  /* ===== TRANSITIONS ===== */

  --scout-transition-fast:   150ms ease-out;
  --scout-transition-normal: 250ms ease-out;
  --scout-transition-slow:   400ms ease-out;

  /* ===== LAYOUT ===== */

  --scout-container-max: 1200px;
  --scout-container-px:  40px;
  --scout-container-px-mobile: 24px;
}

/* ===== UTILITY CLASSES ===== */

.scout-wordmark {
  font-family: var(--scout-font-display);
  font-weight: var(--scout-weight-extrabold);
  letter-spacing: var(--scout-tracking-tight);
  line-height: var(--scout-leading-none);
}

.scout-eyebrow {
  font-family: var(--scout-font-mono);
  font-size: var(--scout-text-xs);
  letter-spacing: var(--scout-tracking-widest);
  text-transform: uppercase;
  color: var(--scout-text-faint);
}

.scout-tagline {
  font-family: var(--scout-font-mono);
  font-size: var(--scout-text-xs);
  letter-spacing: var(--scout-tracking-widest);
  text-transform: uppercase;
  color: var(--scout-text-dim);
}

/* ===== FONT IMPORT (drop in <head> or import in CSS) ===== */
/*
  <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=Geist:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
*/