/**
 * Design System Tokens
 * Single source of truth for all design tokens
 * 
 * This file defines ALL design tokens used across the application.
 * Import this file first, then use tokens in all other CSS files.
 */

:root {
  /* ============================================
       GRID SYSTEM (8px base)
       ============================================ */
  --grid-base: 8px;
  --grid-unit-1: calc(var(--grid-base) * 1); /* 8px */
  --grid-unit-2: calc(var(--grid-base) * 2); /* 16px */
  --grid-unit-3: calc(var(--grid-base) * 3); /* 24px */
  --grid-unit-4: calc(var(--grid-base) * 4); /* 32px */
  --grid-unit-5: calc(var(--grid-base) * 5); /* 40px */
  --grid-unit-6: calc(var(--grid-base) * 6); /* 48px */
  --grid-unit-8: calc(var(--grid-base) * 8); /* 64px */
  --grid-unit-10: calc(var(--grid-base) * 10); /* 80px */
  --grid-unit-12: calc(var(--grid-base) * 12); /* 96px */
  --grid-unit-16: calc(var(--grid-base) * 16); /* 128px */

  /* Spacing Scale */
  --spacing-xs: var(--grid-unit-1); /* 8px */
  --spacing-sm: var(--grid-unit-1); /* 8px */
  --spacing-md: var(--grid-unit-2); /* 16px */
  --spacing-lg: var(--grid-unit-3); /* 24px */
  --spacing-xl: var(--grid-unit-4); /* 32px */
  --spacing-2xl: var(--grid-unit-6); /* 48px */
  --spacing-3xl: var(--grid-unit-8); /* 64px */

  /* Layout Grid */
  --container-max-width: 1440px;
  --gutter-desktop: var(--grid-unit-3); /* 24px */
  --gutter-tablet: var(--grid-unit-2); /* 16px */
  --gutter-mobile: calc(var(--grid-base) * 1.5); /* 12px */
  --columns-desktop: 12;
  --columns-tablet: 8;
  --columns-mobile: 4;

  /* ============================================
       COLOR SYSTEM: "DEEP VOID" (Industrial Zen)
       ============================================ */

  /* --- THE VOID (Backgrounds) --- */
  --surface-0: #121418; /* Base: Deep Void Charcoal (OLED compatible) */
  --surface-1: #1a1d23; /* Elevated (Cards, Sidebars) */
  --surface-2: #252a33; /* Modals, Dropdowns */
  --surface-3: #323844; /* Hover states */

  /* --- THE SIGNAL (Accents) --- */
  --signal-cyan: #00f0ff; /* Information, Tech, Magic */
  --signal-amber: #ffb800; /* Warnings, Critical Rolls, Heat */
  --signal-crimson: #ff2a2a; /* Combat, Danger, Health Loss */
  --signal-emerald: #00e055; /* Success, Safe Zones */
  --signal-white: #e0e6ed; /* Neutral text */

  /* Game-specific colors (for backward compatibility) */
  --terminal-green: #33ff00;
  --terminal-dim: #1a8000;

  /* --- THE TEXT (Readability) --- */
  --text-primary: #ededed; /* Off-white (reduces halation) */
  --text-secondary: #a1a7b3; /* Muted for metadata */
  --text-tertiary: #6e7687; /* Subtle labels */

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

  /* Font Families */
  --font-display: "Orbitron", sans-serif; /* Headers: Retro-Futurism */
  --font-mono: "Roboto Mono", monospace; /* Data/UI: Technical Precision */
  --font-body:
    "Atkinson Hyperlegible", sans-serif; /* Narrative: Human & Accessible */

  /* Legacy mapping for backward compatibility */
  --font-main: var(--font-mono);
  --font-primary: var(--font-body);

  /* Font Sizes (8px base) */
  --font-size-xs: calc(var(--grid-base) * 1.5); /* 12px */
  --font-size-sm: calc(var(--grid-base) * 1.75); /* 14px */
  --font-size-base: calc(var(--grid-base) * 2); /* 16px */
  --font-size-lg: calc(var(--grid-base) * 2.5); /* 20px */
  --font-size-xl: calc(var(--grid-base) * 3); /* 24px */
  --font-size-2xl: calc(var(--grid-base) * 4); /* 32px */
  --font-size-3xl: calc(var(--grid-base) * 5); /* 40px */
  --font-size-4xl: calc(var(--grid-base) * 6); /* 48px */

  /* Line Heights */
  --line-height-tight: calc(var(--grid-base) * 2); /* 16px */
  --line-height-base: calc(var(--grid-base) * 3); /* 24px */
  --line-height-relaxed: calc(var(--grid-base) * 3.5); /* 28px */
  --line-height-loose: calc(var(--grid-base) * 4); /* 32px */

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;

  /* ============================================
       COMPONENTS
       ============================================ */

  /* Buttons */
  --button-height-sm: var(--grid-unit-5); /* 40px */
  --button-height-md: var(--grid-unit-6); /* 48px */
  --button-padding-x: var(--grid-unit-3); /* 24px */
  --button-padding-y: calc(var(--grid-base) * 1.5); /* 12px */
  --button-border-radius: calc(var(--grid-base) * 0.5); /* 4px */
  --button-min-width: calc(var(--grid-base) * 15); /* 120px */

  /* Cards */
  --card-padding: var(--grid-unit-3); /* 24px */
  --card-border-radius: var(--grid-base); /* 8px */
  --card-gap: var(--grid-unit-3); /* 24px */

  /* Inputs */
  --input-height: var(--grid-unit-5); /* 40px */
  --input-padding-x: var(--grid-unit-2); /* 16px */
  --input-padding-y: calc(var(--grid-base) * 1.5); /* 12px */
  --input-border-radius: calc(var(--grid-base) * 0.5); /* 4px */
  --input-border-width: 1px;

  /* Icons */
  --icon-size-xs: var(--grid-unit-2); /* 16px */
  --icon-size-sm: calc(var(--grid-base) * 2.5); /* 20px */
  --icon-size-md: var(--grid-unit-3); /* 24px */
  --icon-size-lg: var(--grid-unit-4); /* 32px */

  /* ============================================
       SHADOWS
       ============================================ */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* ============================================
       BORDER RADIUS
       ============================================ */
  --radius-none: 0;
  --radius-sm: calc(var(--grid-base) * 0.5); /* 4px */
  --radius-md: var(--grid-base); /* 8px */
  --radius-lg: calc(var(--grid-base) * 1.5); /* 12px */
  --radius-xl: var(--grid-unit-2); /* 16px */
  --radius-full: 9999px;

  /* ============================================
       Z-INDEX SCALE
       ============================================ */
  --z-base: 0;
  --z-elevated: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-tooltip: 500;
  --z-notification: 600;
  --z-screen: 1000; /* Title screen, character select */
  --z-screen-overlay: 9999; /* Character creator */

  /* ============================================
       TRANSITIONS
       ============================================ */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ============================================
       INTERACTION
       ============================================ */
  --focus-ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--signal-cyan);

  /* ============================================
       RESPONSIVE BREAKPOINTS
       ============================================ */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;

  /* ============================================
       LEGACY COLOR MAPPINGS (Backward Compatibility)
       ============================================ */

  /* Map old variables to new system for gradual migration */
  --color-bg-primary: var(--surface-0);
  --color-bg-secondary: var(--surface-1);
  --color-bg-tertiary: var(--surface-2);
  --color-bg-surface: var(--surface-1);
  --color-bg-elevated: var(--surface-2);

  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary: var(--text-tertiary);
  --color-text-inverse: var(--surface-0);

  --color-info: var(--signal-cyan);
  --color-success: var(--signal-emerald);
  --color-warning: var(--signal-amber);
  --color-error: var(--signal-crimson);

  --color-accent-cyan: var(--signal-cyan);
  --color-accent-orange: var(--signal-amber);
  --color-accent-green: var(--signal-emerald);

  /* Legacy neutral palette */
  --color-neutral-900: var(--surface-0);
  --color-neutral-800: var(--surface-1);
  --color-neutral-700: var(--surface-2);
  --color-neutral-600: var(--surface-3);
  --color-neutral-500: var(--text-tertiary);
  --color-neutral-400: var(--text-secondary);
  --color-neutral-300: var(--text-primary);

  --color-border-primary: rgba(255, 255, 255, 0.08);
  --color-border-secondary: rgba(255, 255, 255, 0.15);
  --color-border-accent: var(--signal-cyan);
}

/* Light Mode Support */
@media (prefers-color-scheme: light) {
  :root {
    --surface-0: #f0f2f5;
    --surface-1: #ffffff;
    --surface-2: #e8eaed;
    --surface-3: #dadce0;

    --text-primary: #121418;
    --text-secondary: #5f6368;
    --text-tertiary: #9aa0a6;

    /* Signal colors adjusted for light mode */
    --signal-cyan: #0066cc;
    --signal-amber: #ea8600;
    --signal-crimson: #c5221f;
    --signal-emerald: #137333;
  }
}

/* Explicit theme classes */
html.theme-light {
  --surface-0: #f0f2f5;
  --surface-1: #ffffff;
  --surface-2: #e8eaed;
  --surface-3: #dadce0;

  --text-primary: #121418;
  --text-secondary: #5f6368;
  --text-tertiary: #9aa0a6;

  --signal-cyan: #0066cc;
  --signal-amber: #ea8600;
  --signal-crimson: #c5221f;
  --signal-emerald: #137333;
}

html.theme-dark {
  --surface-0: #121418;
  --surface-1: #1a1d23;
  --surface-2: #252a33;
  --surface-3: #323844;

  --text-primary: #ededed;
  --text-secondary: #a1a7b3;
  --text-tertiary: #6e7687;
}