/* SHAMAN Brand Variables */
:root {
  /* 🎨 Brand Colors */
  --deep-sea-blue: #001f2d;
  --terminal-green: #66ffcc;
  --electric-surf-blue: #00bfff;
  --rip-current-pink: #ff66cc;
  --offshore-yellow: #ffff00;

  /* 🌊 Color Variations */
  --deep-sea-blue-light: #002a3d;
  --deep-sea-blue-dark: #00141a;
  --terminal-green-light: #80ffdd;
  --terminal-green-dark: #4dcc99;
  --electric-surf-blue-light: #33ccff;
  --electric-surf-blue-dark: #0099cc;

  /* 🎭 Contextual Colors */
  --bg-primary: var(--deep-sea-blue);
  --bg-secondary: var(--deep-sea-blue-light);
  --bg-overlay: rgba(0, 31, 45, 0.9);
  --text-primary: var(--terminal-green);
  --text-secondary: var(--terminal-green-light);
  --text-accent: var(--electric-surf-blue);
  --text-highlight: var(--offshore-yellow);
  --text-alert: var(--rip-current-pink);

  /* 🅰️ Typography */
  --font-primary: 'Source Code Pro', 'Courier New', 'Monaco', monospace;
  --font-secondary: 'Courier New', 'IBM Plex Mono', monospace;
  --font-system: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* 📏 Font Sizes */
  --font-xs: 0.75rem;    /* 12px */
  --font-sm: 0.875rem;   /* 14px */
  --font-base: 1rem;     /* 16px */
  --font-lg: 1.125rem;   /* 18px */
  --font-xl: 1.25rem;    /* 20px */
  --font-2xl: 1.5rem;    /* 24px */
  --font-3xl: 1.875rem;  /* 30px */
  --font-4xl: 2.25rem;   /* 36px */

  /* 📐 Spacing */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */

  /* 📦 Layout */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.75rem;
  --border-radius-xl: 1rem;

  /* 🌟 Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 31, 45, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 31, 45, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 31, 45, 0.4);
  --shadow-xl: 0 20px 25px rgba(0, 31, 45, 0.5);
  --shadow-terminal: 0 0 20px var(--terminal-green);
  --shadow-electric: 0 0 20px var(--electric-surf-blue);

  /* ⚡ Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* 📱 Breakpoints (for use in media queries) */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* 🧙‍♂️ Terminal Cursor */
  --cursor-char: '█';
  --cursor-blink: blink 1s infinite;

  /* 📚 Z-Index Stack */
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-modal: 1000;          /* Chat sidebar */
  --z-tooltip: 1010;
  --z-overlay: 2000;
  --z-windy-controls: 2147483646;  /* Windy controls and UI */
  --z-windy-timeline: 2147483647;  /* Windy timeline (highest) */
  --z-max: 2147483647;
}

/* 🌓 Dark Mode Support (default is dark theme) */
@media (prefers-color-scheme: light) {
  :root {
    /* Light mode adaptations if needed */
    --bg-overlay: rgba(0, 31, 45, 0.95);
  }
}

/* 🎯 Custom Properties for ASCII Art */
:root {
  --ascii-wave: '~^~^~^~^~^~^~^~^~';
  --ascii-divider: '═══════════════════════════════════════';
  --terminal-prompt: '🧙‍♂️ SHAMAN >';
}