/**
 * Design System Foundation
 * 
 * Single source of truth for all design tokens, grid system, and base styles.
 * Every pixel aligns to this system.
 */

:root {
    /* ============================================
       GRID SYSTEM
       ============================================ */
    --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) --- */
    /* Base: Deep Void Charcoal (Not Black) - Replaces #000000 for OLED compatibility */
    --surface-0: #121418;
    /* Surface 1: Elevated (Cards, Sidebars) */
    --surface-1: #1A1D23;
    /* Surface 2: Modals, Dropdowns */
    --surface-2: #252A33;
    /* Surface 3: Hover states */
    --surface-3: #323844;
    
    /* --- THE SIGNAL (Accents) --- */
    /* Neon Cyan: Information, Tech, Magic - High Visibility */
    --signal-cyan: #00F0FF;
    /* Neon Amber: Warnings, Critical Rolls, Heat */
    --signal-amber: #FFB800;
    /* Neon Crimson: Combat, Danger, Health Loss */
    --signal-crimson: #FF2A2A;
    /* Neon Emerald: Success, Safe Zones */
    --signal-emerald: #00E055;
    
    /* --- THE TEXT (Readability) --- */
    /* Primary: Off-white (reduces halation) */
    --text-primary: #EDEDED;
    /* Secondary: Muted for metadata */
    --text-secondary: #A1A7B3;
    /* Tertiary: Subtle labels */
    --text-tertiary: #6E7687;
    
    /* --- INTERACTION --- */
    --focus-ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--signal-cyan);
    
    /* ============================================
       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 (mapped to new system) */
    --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);
    
    /* ============================================
       TYPOGRAPHY: The Narrative Voice
       ============================================ */
    
    /* Headers: Retro-Futurism */
    --font-display: 'Orbitron', sans-serif;
    
    /* Data/UI: Technical Precision */
    --font-mono: 'Roboto Mono', monospace;
    
    /* Narrative: The AI Voice (Human & Accessible) */
    --font-body: 'Atkinson Hyperlegible', sans-serif;
    
    /* Legacy mapping for backward compatibility */
    --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 (8px base) */
    --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);  /* var(--spacing-md) */
    --button-padding-y: calc(var(--grid-base) * 1.5); /* 12px */
    --button-border-radius: calc(var(--grid-base) * 0.5); /* 4px */
    
    /* Button Padding Shorthand Variables */
    --btn-padding-md: var(--spacing-sm) var(--spacing-md);  /* 8px 16px */
    --btn-padding-lg: calc(var(--grid-base) * 1.5) var(--spacing-lg);  /* 12px 24px */
    --button-min-width: calc(var(--grid-base) * 15); /* 120px */
    
    /* Cards */
    --card-padding: var(--grid-unit-3);      /* var(--spacing-md) */
    --card-border-radius: var(--grid-base);  /* 8px */
    --card-gap: var(--grid-unit-3);          /* var(--spacing-md) */
    
    /* Inputs */
    --input-height: var(--grid-unit-5);      /* 40px */
    --input-padding-x: var(--grid-unit-2);   /* var(--spacing-sm) */
    --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
       ============================================ */
    --z-base: 0;
    --z-elevated: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-tooltip: 500;
    --z-notification: 600;
    
    /* ============================================
       TRANSITIONS
       ============================================ */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

/* ============================================
   BASE GRID SYSTEM
   ============================================ */

* {
    box-sizing: border-box;

/* ============================================
   BASE HTML/BODY STYLES
   ============================================ */

html {
    width: 100%;
    height: 100%;
    overflow-x: hidden;

body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-width: 100%;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--text-primary);
    background-color: var(--surface-0);
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-x: hidden;

/* ============================================
   LIGHT/DARK MODE SUPPORT
   Respects user's system preference
   ============================================ */

/* Typography Application */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    letter-spacing: 0.05em;

.stat-value, .roll-result, code, pre {
    font-family: var(--font-mono);

.chat-message, .narrative-text, p, li, span {
    font-family: var(--font-body);
    line-height: 1.6;

/* Light Mode - Respects system preference */
@media (prefers-color-scheme: light) {
    :root {
        /* Light Mode: Invert surfaces, keep signal colors */
        --surface-0: #F0F2F5;
        --surface-1: #FFFFFF;
        --surface-2: #E8EAED;
        --surface-3: #DADCE0;
        
        --text-primary: #121418;
        --text-secondary: #5F6368;
        --text-tertiary: #9AA0A6;
        
        /* Signal colors remain similar but may need slight adjustment */
        --signal-cyan: #0066CC;
        --signal-amber: #EA8600;
        --signal-crimson: #C5221F;
        --signal-emerald: #137333;
        
        /* Legacy mappings */
        --color-bg-primary: var(--surface-0);
        --color-bg-secondary: var(--surface-1);
        --color-text-primary: var(--text-primary);
        --color-text-secondary: var(--text-secondary);

    body {
        background-color: var(--surface-0);
        color: var(--text-primary);

/* Dark Mode - Explicit preference */
@media (prefers-color-scheme: dark) {
    :root {
        /* Ensure dark mode variables are set (already default, but explicit) */
        --surface-0: #121418;
        --surface-1: #1A1D23;
        --surface-2: #252A33;
        --surface-3: #323844;
        
        --text-primary: #EDEDED;
        --text-secondary: #A1A7B3;
        --text-tertiary: #6E7687;
        
        /* Legacy mappings */
        --color-bg-primary: var(--surface-0);
        --color-bg-secondary: var(--surface-1);
        --color-text-primary: var(--text-primary);
        --color-text-secondary: var(--text-secondary);

/* Explicit theme override via class on html element */
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 colors adjusted for light mode */
    --signal-cyan: #0066CC;
    --signal-amber: #EA8600;
    --signal-crimson: #C5221F;
    --signal-emerald: #137333;
    
    /* Legacy mappings */
    --color-bg-primary: var(--surface-0);
    --color-bg-secondary: var(--surface-1);
    --color-text-primary: var(--text-primary);
    --color-text-secondary: var(--text-secondary);

html.theme-light body {
    background-color: var(--surface-0);
    color: var(--text-primary);

html.theme-dark {
    /* Explicit dark theme (same as default) */
    --surface-0: #121418;
    --surface-1: #1A1D23;
    --surface-2: #252A33;
    --surface-3: #323844;
    
    --text-primary: #EDEDED;
    --text-secondary: #A1A7B3;
    --text-tertiary: #6E7687;
    
    /* Legacy mappings */
    --color-bg-primary: var(--surface-0);
    --color-bg-secondary: var(--surface-1);
    --color-text-primary: var(--text-primary);
    --color-text-secondary: var(--text-secondary);

html.theme-dark body {
    background-color: var(--surface-0);
    color: var(--text-primary);

/* Legacy data-theme attribute support (for backward compatibility) */
body[data-theme="light"] {
    --surface-0: #F0F2F5;
    --surface-1: #FFFFFF;
    --text-primary: #121418;
    --text-secondary: #5F6368;
    background-color: var(--surface-0);
    color: var(--text-primary);

body[data-theme="dark"] {
    --surface-0: #121418;
    --surface-1: #1A1D23;
    --text-primary: #EDEDED;
    --text-secondary: #A1A7B3;
    background-color: var(--surface-0);
    color: var(--text-primary);

/* Container */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--gutter-desktop);

@media (max-width: 768px) {
    .container {
        padding: 0 var(--gutter-mobile);

/* Grid System */
.grid {
    display: grid;
    gap: var(--spacing-lg);

.grid-12 {
    grid-template-columns: repeat(12, 1fr);

.grid-8 {
    grid-template-columns: repeat(8, 1fr);

.grid-4 {
    grid-template-columns: repeat(4, 1fr);

@media (max-width: 1024px) {
    .grid-12 {
        grid-template-columns: repeat(8, 1fr);

@media (max-width: 768px) {
    .grid-12,
    .grid-8 {
        grid-template-columns: repeat(4, 1fr);

/* ============================================
   GLASSMORPHISM 2.0: The "HUD" Effect
   ============================================ */

/* The Utility Class - Industrial Glassmorphism */
.glass-panel {
    /* Base transparency */
    background: rgba(26, 29, 35, 0.7);
    
    /* The Blur - performance heavy, use carefully */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* The "Cut Glass" Edge - Critical for Contrast */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15); /* Top lighting highlight */
    
    box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.2);

/* Accessibility: High contrast mode support */
@media (prefers-contrast: more) {
    .glass-panel {
        background: var(--surface-1);
        backdrop-filter: none;
        border: 2px solid var(--text-tertiary);

/* Focus Ring for Accessibility */
*:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);

/* Signal Color Badge Examples (Inner Glow Pattern) */
.badge-tech {
    background-color: rgba(0, 240, 255, 0.1); /* 10% opacity cyan */
    border: 1px solid var(--signal-cyan);
    color: var(--signal-cyan);
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.2); /* The "Glow" */

.badge-warning {
    background-color: rgba(255, 184, 0, 0.1);
    border: 1px solid var(--signal-amber);
    color: var(--signal-amber);
    box-shadow: 0 0 8px rgba(255, 184, 0, 0.2);

.badge-danger {
    background-color: rgba(255, 42, 42, 0.1);
    border: 1px solid var(--signal-crimson);
    color: var(--signal-crimson);
    box-shadow: 0 0 8px rgba(255, 42, 42, 0.2);

.badge-success {
    background-color: rgba(0, 224, 85, 0.1);
    border: 1px solid var(--signal-emerald);
    color: var(--signal-emerald);
    box-shadow: 0 0 8px rgba(0, 224, 85, 0.2);

/* ============================================
   BREADCRUMB NAVIGATION
   ============================================ */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) 0;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);

.breadcrumb a {
    color: var(--signal-cyan);
    text-decoration: none;
    transition: color 0.2s;
    text-transform: uppercase;

.breadcrumb a:hover {
    color: var(--signal-cyan);
    text-decoration: underline;

.breadcrumb .separator {
    color: var(--text-tertiary);
    margin: 0 var(--spacing-xs);

.breadcrumb .current {
    color: var(--text-primary);
    text-transform: uppercase;

/* Mobile breadcrumb adjustments */
@media (max-width: 768px) {
    .breadcrumb {
        font-size: 0.75rem;
        padding: var(--spacing-sm) 0;
        flex-wrap: wrap;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Spacing Utilities */
.m-0 { margin: 0; }
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }
.m-2xl { margin: var(--spacing-2xl); }
.m-3xl { margin: var(--spacing-3xl); }

.p-0 { padding: 0; }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-2xl { padding: var(--spacing-2xl); }
.p-3xl { padding: var(--spacing-3xl); }

/* Text Utilities */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }

/* ============================================
   DESIGN SYSTEM ENFORCEMENT
   ============================================ */

/* Warn about non-grid values in development */
@media (prefers-reduced-motion: no-preference) {
    /* This will help catch violations during development */
}

}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}