/* ============================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   Design tokens for consistent theming
   ============================================ */

:root {
  /* Colors - Primary (Grunge Orange) */
  --color-primary: #c5641c;
  --color-primary-hover: #a0501a;

  /* Colors - Text (Light on Dark) */
  --color-text: #e8e6e3;
  --color-text-muted: #a8a6a3;
  --color-text-light: #c8c6c3;

  /* Colors - Backgrounds (Dark Grunge) */
  --color-bg-white: #1a1816;
  --color-bg-alt: #2a2826;
  --color-bg-light: #222220;
  --color-bg-code: #2a2520;

  /* Colors - Borders (Dark) */
  --color-border: #3a3836;
  --color-border-light: #333331;
  --color-border-medium: #404040;

  /* Colors - Additional */
  --color-link: #c5641c;
  --color-text-dark: #e8e6e3;
  --color-text-charcoal: #d8d6d3;
  --color-text-gray-light: #b8b6b3;
  --color-bg-near-white: #222220;
  --color-bg-blue-light: #2a3540;
  --color-blue-primary: #4a9eff;
  --color-purple-primary: #8b7eea;

  /* Semantic Color Aliases */
  --orange-primary: var(--color-primary);
  --orange-dark: var(--color-primary-hover);

  /* Spacing Scale */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
  --spacing-2xl: 40px;
  --spacing-3xl: 50px;

  /* Layout */
  --header-height: 60px;
  --max-content-width: 900px;
  --max-site-width: 1200px;

  /* Typography */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-code: "Menlo", "Courier New", monospace;
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --line-height-base: 1.6;
  --line-height-tight: 1.3;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-drawer: 2px 0 8px rgba(0,0,0,0.15);

  /* Border Radius */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* Breakpoints (for JavaScript) */
  --breakpoint-mobile: 600px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 900px;
  --breakpoint-wide: 1200px;

  /* Z-index Scale */
  --z-base: 1;
  --z-dropdown: 999;
  --z-header: 1000;
  --z-drawer-overlay: 2000;
  --z-drawer: 2001;
  --z-modal: 3000;
}

/* Grunge dark theme is now the default */