/* ==============================================================================
 * 🛡️ Matrix-RS Single Source of Truth (SST) Design Tokens (theme.css)
 * 100% Pure Tokenization - Zero Inline Styles
 * ============================================================================== */

:root {
    /* 🎨 Base Dark Theme (Default) */
    --bg-base: #090d16;
    --bg-surface: rgba(15, 23, 42, 0.85);
    --bg-surface-elevated: rgba(30, 41, 59, 0.9);
    --bg-glass: rgba(15, 23, 42, 0.7);
    --border-color: rgba(255, 255, 255, 0.08);
    --border-color-glow: rgba(0, 168, 204, 0.3);

    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    --color-brand: #00a8cc;
    --color-brand-hover: #008fae;
    --color-brand-glow: rgba(0, 168, 204, 0.25);
    
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-danger-hover: #dc2626;

    /* 🪟 Glassmorphism & Geometry */
    --glass-blur: 16px;
    --glass-blur-deep: 24px;
    --border-radius-sm: 8px;
    --border-radius-md: 14px;
    --border-radius-lg: 20px;
    --border-radius-pill: 9999px;

    /* 📱 Viewport Safe-Area Insets */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    /* 📏 Layout Density Standard */
    --space-page-x: 16px;
    --gap-grid: 12px;
    --dock-height: 52px;
}

/* 🟢 Cyber Matrix Theme */
[data-theme="matrix-green"] {
    --bg-base: #030a05;
    --bg-surface: rgba(4, 18, 9, 0.85);
    --bg-surface-elevated: rgba(6, 28, 14, 0.9);
    --color-brand: #00ff66;
    --color-brand-hover: #00cc52;
    --color-brand-glow: rgba(0, 255, 102, 0.25);
    --border-color-glow: rgba(0, 255, 102, 0.3);
}

/* ❄️ Nord Arctic Theme */
[data-theme="nord"] {
    --bg-base: #242933;
    --bg-surface: rgba(46, 52, 64, 0.85);
    --bg-surface-elevated: rgba(59, 66, 82, 0.9);
    --color-brand: #88c0d0;
    --color-brand-hover: #81a1c1;
    --color-brand-glow: rgba(136, 192, 208, 0.25);
}

/* 🌆 Synthwave Neon Theme */
[data-theme="synthwave"] {
    --bg-base: #1a102f;
    --bg-surface: rgba(38, 20, 71, 0.85);
    --bg-surface-elevated: rgba(54, 28, 102, 0.9);
    --color-brand: #ff007f;
    --color-brand-hover: #e60072;
    --color-brand-glow: rgba(255, 0, 127, 0.3);
}

/* ☕ Sepia Warm Theme */
[data-theme="sepia"] {
    --bg-base: #1c1815;
    --bg-surface: rgba(43, 37, 33, 0.85);
    --bg-surface-elevated: rgba(59, 51, 46, 0.9);
    --color-brand: #d4a373;
    --color-brand-hover: #c38e5d;
    --color-brand-glow: rgba(212, 163, 115, 0.25);
}

/* 📐 Density Modes */
[data-density="compact"] {
    --gap-grid: 6px;
    --space-page-x: 8px;
    --border-radius-md: 8px;
}

[data-density="relaxed"] {
    --gap-grid: 20px;
    --space-page-x: 24px;
    --border-radius-md: 18px;
}