/**
 * Athabasca Fortress - Design Tokens & Variables
 * Theme: Team Fortress 2 (1960s Retro-Industrial) x Canadian Rockies Backcountry Wilderness
 */

:root {
  /* ==========================================================================
     Color Palette
     ========================================================================== */

  /* Primary BLU: Glacial Blue (Milky, bright turquoise glacier meltwater) */
  --color-blu-glacial: #38c8db;
  --color-blu-glacial-light: #72e2f0;
  --color-blu-glacial-glow: rgba(56, 200, 219, 0.35);
  --color-blu-glacial-dark: #124e58;
  --color-blu-glacial-deep: #0a292f;
  --color-blu-team: #5b7a8c;
  --color-blu-accent: #22d3ee;

  /* Primary RED: Jasper Red (Weathered rust, oxidized iron ore, alpine rock) */
  --color-red-jasper: #c84630;
  --color-red-jasper-light: #e0604b;
  --color-red-jasper-glow: rgba(200, 70, 48, 0.35);
  --color-red-jasper-dark: #6e2418;
  --color-red-jasper-deep: #38120b;
  --color-red-team: #ba3c2a;
  --color-red-accent: #f87171;

  /* Backgrounds & Wilderness Accents: Boreal Green (Dark, earthy pine forest) */
  --color-boreal-black: #08110d;
  --color-boreal-deep: #0d1a14;
  --color-boreal-surface: #14271e;
  --color-boreal-card: #193126;
  --color-boreal-border: #244637;
  --color-boreal-pine: #2e5744;
  --color-boreal-moss: #487e64;
  --color-boreal-glow: rgba(46, 87, 68, 0.4);

  /* Text & UI Elements: Limestone Grey (Rocky Canadian Shield slate & gravel) */
  --color-limestone-900: #121517;
  --color-limestone-800: #1c2124;
  --color-limestone-700: #293035;
  --color-limestone-600: #3c454c;
  --color-limestone-500: #57636d;
  --color-limestone-400: #8896a2;
  --color-limestone-300: #b4c0ca;
  --color-limestone-200: #dce3e8;
  --color-limestone-100: #f1f5f8;

  /* Mann Co. Parchment & 1960s Ephemera Accents */
  --color-parchment-cream: #f4ebda;
  --color-parchment-gold: #e2be78;
  --color-parchment-dark: #cbb489;
  --color-caution-amber: #f59e0b;
  --color-hazard-stripe-yellow: #facc15;
  --color-hazard-stripe-dark: #18181b;

  /* Semantic State Colors */
  --color-online: #10b981;
  --color-online-glow: rgba(16, 185, 129, 0.4);
  --color-warning: #f59e0b;
  --color-offline: #ef4444;
  --color-offline-glow: rgba(239, 68, 68, 0.3);

  /* ==========================================================================
     Typography
     ========================================================================== */
  --font-tf2-header: 'TF2 Build', 'Impact', 'Arial Black', 'Trebuchet MS', sans-serif;
  --font-tf2-sub: 'Rajdhani', 'Impact', sans-serif;
  --font-body: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-condensed: 'Barlow Condensed', 'Roboto Condensed', sans-serif;
  --font-mono: 'JetBrains Mono', 'Source Code Pro', 'Consolas', monospace;

  /* Font Weights */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* ==========================================================================
     Elevation & Shadows
     ========================================================================== */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.6), 0 2px 5px rgba(0, 0, 0, 0.7);
  --shadow-inset-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -2px 0 rgba(0, 0, 0, 0.5);
  --shadow-glow-blu: 0 0 20px var(--color-blu-glacial-glow);
  --shadow-glow-red: 0 0 20px var(--color-red-jasper-glow);
  --shadow-glow-boreal: 0 0 20px var(--color-boreal-glow);

  /* ==========================================================================
     Borders, Radii, & Tactile TF2 Details
     ========================================================================== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;
  
  --border-weathered: 1px solid var(--color-boreal-border);
  --border-industrial: 2px solid var(--color-limestone-700);
  --border-blu: 2px solid var(--color-blu-glacial);
  --border-red: 2px solid var(--color-red-jasper);

  /* Transition speeds */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}