/*
 * Ballot Brawl — Design System Tokens
 * Version: 0.1.0 (visual foundation)
 * Last updated: 2026-05-11
 *
 * All surfaces derive from this file. No surface should invent its own
 * colors, fonts, or spacing logic.
 */

:root {
  /* ─── Color Tokens ─── */

  /* Team colors — deep editorial, not party-flag saturated */
  --color-red-team: #B22234;
  --color-red-team-dark: #8B1A2B;
  --color-red-team-light: #D44058;
  --color-red-team-bg: #C42B3F;

  --color-blue-team: #1B4F8A;
  --color-blue-team-dark: #133660;
  --color-blue-team-light: #2A6DB8;
  --color-blue-team-bg: #1E5A96;

  /* Surfaces */
  --color-neutral: #F5F2EB;       /* warm newsprint off-white */
  --color-neutral-warm: #EDE8DD;  /* slightly warmer variant */
  --color-neutral-cool: #F0EDE6;  /* slightly cooler variant */
  --color-ink: #1A1A1A;           /* primary text — warm undertone */
  --color-headline: #000000;      /* pure black for headlines */
  --color-dark: #2D2D2D;          /* dark surface backgrounds */
  --color-dark-elevated: #3A3A3A; /* elevated dark surfaces */

  /* Spin indicator colors — always paired with label + icon */
  --color-outrage: #E07B39;       /* warm amber/orange */
  --color-outrage-dark: #C46A2D;
  --color-outrage-bg: rgba(224, 123, 57, 0.12);

  --color-economy: #3B8A5A;       /* money green */
  --color-economy-dark: #2D6E47;
  --color-economy-bg: rgba(59, 138, 90, 0.12);

  --color-security: #5A7A96;      /* steel/cool gray-blue */
  --color-security-dark: #466278;
  --color-security-bg: rgba(90, 122, 150, 0.12);

  /* Utility */
  --color-caution: #D4A017;       /* risk/review labels — internal only */
  --color-success: #3B8A5A;
  --color-danger: #C42B3F;

  /* Text on surfaces */
  --color-text-on-dark: #F5F2EB;
  --color-text-on-red: #FFFFFF;
  --color-text-on-blue: #FFFFFF;
  --color-text-secondary: #5C5C5C;
  --color-text-tertiary: #8A8A8A;

  /* Borders and rules */
  --color-rule: #1A1A1A;
  --color-rule-light: rgba(26, 26, 26, 0.25);
  --color-rule-team: rgba(26, 26, 26, 0.4);

  /* ─── Typography ─── */

  /* Font families — system fallbacks until webfonts are loaded */
  --font-display: 'Arial Black', 'Helvetica Neue', Impact, sans-serif;
  --font-body: 'Georgia', 'Times New Roman', serif;

  /* Size scale */
  --size-hero: 2.5rem;      /* 40px — landing page headline */
  --size-h1: 2rem;          /* 32px */
  --size-h2: 1.5rem;        /* 24px — card names, section headers */
  --size-h3: 1.25rem;       /* 20px — sub-sections */
  --size-body: 1rem;        /* 16px — body text, card effects */
  --size-small: 0.875rem;   /* 14px — flavor text, captions */
  --size-stat: 1.5rem;      /* 24px — stat numbers on cards */
  --size-label: 0.75rem;    /* 12px — spin labels, badges */
  --size-micro: 0.625rem;   /* 10px — disclaimers, internal marks */

  /* Font weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;

  /* Line heights */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;

  /* ─── Spacing Scale ─── */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;   /* standard card padding */
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ─── Layout ─── */

  --card-width: 320px;
  --card-height: 450px;
  --card-radius: 12px;
  --card-padding: var(--space-4);

  --page-max-width: 640px;
  --page-max-width-desktop: 960px;
  --page-section-gap: var(--space-16);

  /* ─── Borders & Rules ─── */

  --rule-width: 2px;         /* bold divider rules */
  --rule-width-light: 1px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;

  /* ─── Shadows ─── */

  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.1);
  --shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.16);

  /* ─── Transitions ─── */

  --transition-fast: 100ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 400ms ease;

  /* ─── Z-Index Scale ─── */

  --z-base: 0;
  --z-card: 10;
  --z-overlay: 100;
  --z-modal: 1000;

  /* ─── Texture Opacity ─── */

  --halftone-opacity: 0.06;
  --grain-opacity: 0.04;
}

/* ─── Reduced Motion ─── */

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}