/* 
 * Unified Theme Token System
 * 
 * Single source of truth for all theme tokens across the MySerene application.
 * All components (Internal Console, Care Companion, Spark UI, MudBlazor) should
 * reference these tokens to ensure consistent theming and light/dark mode behavior.
 * 
 * Token Categories:
 * - Base backgrounds (--bg, --bg-alt)
 * - Text colors (--text, --text-muted, --text-secondary)
 * - Surfaces and panels (--surface, --surface-alt, --surface-subtle)
 * - Borders (--border, --border-hover)
 * - Interactive/accent colors (--accent, --accent-hover, --accent-soft)
 * - Semantic colors (--success, --warning, --error)
 * - Shadows (--shadow-light, --shadow-medium, --shadow-strong)
 * 
 * Usage:
 * - Always use these tokens in CSS: background: var(--bg);
 * - Never hard-code colors in components
 * - MudBlazor palette maps to these tokens via CSS variables
 */

/* ==================== Dark Mode (Default) ==================== */
:root {
    /* Base backgrounds */
    --bg: #0b0f14;
    --bg-alt: #121822;
    
    /* Text colors */
    --text: #e8eef4;
    --text-muted: #8aa1b3;
    --text-secondary: #8aa1b3;
    --text-disabled: #5E6772;
    
    /* Surfaces and panels */
    --surface: #121822;
    --surface-alt: #1a2230;
    --surface-subtle: #0f1520;
    --surface-hover: rgba(255, 255, 255, 0.08);
    
    /* Borders */
    --border: #1b2330;
    --border-hover: rgba(255, 255, 255, 0.12);
    --border-light: rgba(255, 255, 255, 0.08);
    
    /* Interactive / accent colors */
    --accent: #6aa3ff;
    --accent-hover: #74a6ff;
    --accent-soft: rgba(106, 163, 255, 0.15);
    --accent-border: rgba(106, 163, 255, 0.40);
    
    /* Semantic colors */
    --success: #3ccf91;
    --success-hover: rgba(60, 207, 145, 0.12);
    --warning: #ffd166;
    --warning-hover: rgba(255, 209, 102, 0.12);
    --error: #ff6b6b;
    --error-hover: rgba(255, 107, 107, 0.12);
    
    /* Shadows */
    --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.3);
    --shadow-strong: 0 4px 12px rgba(0, 0, 0, 0.4);
    
    /* Additional utility colors */
    --overlay-bg: rgba(11, 15, 20, 0.5);
    --card-bg: #0f1520;
    
    /* Gray scale */
    --gray-default: #5E6772;
    --gray-light: #8aa1b3;
    --gray-lighter: #cbd5e1;
    --gray-dark: #475569;
    --gray-darker: #1b2330;
}

/* ==================== Light Mode Overrides ==================== */
body[data-theme="light"],
[data-theme="light"] {
    /* Base backgrounds */
    --bg: #f5f7fb;
    --bg-alt: #ffffff;
    
    /* Text colors */
    --text: #1a1d21;
    --text-muted: #5E6772;
    --text-secondary: #5E6772;
    --text-disabled: #8aa1b3;
    
    /* Surfaces and panels */
    --surface: #ffffff;
    --surface-alt: #f0f3f7;
    --surface-subtle: #fafafa;
    --surface-hover: rgba(0, 0, 0, 0.04);
    
    /* Borders */
    --border: #E2E8F0;
    --border-hover: rgba(0, 0, 0, 0.1);
    --border-light: rgba(0, 0, 0, 0.06);
    
    /* Interactive / accent colors */
    --accent: #5B8CFF;
    --accent-hover: #4A74F9;
    --accent-soft: rgba(91, 140, 255, 0.08);
    --accent-border: rgba(91, 140, 255, 0.35);
    
    /* Semantic colors */
    --success: #2e9d70;
    --success-hover: rgba(46, 157, 112, 0.12);
    --warning: #ffb454;
    --warning-hover: rgba(255, 180, 84, 0.12);
    --error: #e05757;
    --error-hover: rgba(224, 87, 87, 0.12);
    
    /* Shadows */
    --shadow-light: 0 1px 4px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 2px 10px rgba(0, 0, 0, 0.06);
    --shadow-strong: 0 4px 12px rgba(0, 0, 0, 0.1);
    
    /* Additional utility colors */
    --overlay-bg: rgba(232, 238, 244, 0.5);
    --card-bg: #ffffff;
    
    /* Gray scale */
    --gray-default: #5E6772;
    --gray-light: #8aa1b3;
    --gray-lighter: #cbd5e1;
    --gray-dark: #475569;
    --gray-darker: #1b2330;
}

/* ==================== Legacy Token Compatibility ==================== */
/* 
 * These mappings maintain backwards compatibility with existing components
 * that reference older token names. Gradually migrate to using the canonical
 * tokens above.
 */
:root {
    /* Legacy token mappings */
    --panel: var(--surface);
    --muted: var(--text-muted);
    --primary: var(--accent);
    --dark: var(--surface-subtle);
    
    /* Card tokens */
    --card-surface: var(--card-bg);
    
    /* Hover backgrounds */
    --hover-bg: var(--surface-hover);
}