/* =========================================
   DESIGN TOKENS & SYSTEM VARIABLES
   ========================================= */

:root {
    /* --- PRIMITIVE PALETTE: NEUTRAL (SLATE) --- */
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;

    /* --- PRIMITIVE PALETTE: BRAND (ROSE - Default) --- */
    --primary-50:  #fff1f2;
    --primary-100: #ffe4e6;
    --primary-500: #f43f5e;
    --primary-600: #e11d48;
    --primary-700: #be123c;

    /* --- UTILITY COLORS --- */
    --success-500: #10b981;
    --warning-500: #f59e0b;
    --error-500:   #ef4444;
    --c-success:   var(--success-500);
    --c-error:     var(--error-500);

    /* --- SEMANTIC THEME MAP (LIGHT MODE DEFAULT) --- */
    --app-bg:       var(--slate-50);
    --panel-bg:     #ffffff;
    --panel-border: var(--slate-200);
    
    --input-bg:     #ffffff;
    --input-border: var(--slate-300);
    --input-focus-ring: rgba(225, 29, 72, 0.15); /* Matches Rose */
    
    --text-main:    var(--slate-900);
    --text-body:    var(--slate-600);
    --text-mute:    var(--slate-400);
    --text-inverse: #ffffff;

    /* Brand Mapping */
    --brand-color:  var(--primary-600);
    --brand-hover:  var(--primary-700);
    --brand-active: var(--primary-500);
    --brand-surface: var(--primary-50);

    /* Shadows & Depth */
    --shadow-sm:    0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md:    0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);
    --shadow-lg:    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
    --shadow-xl:    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);

    /* Dimensions & Layout */
    --header-height: 70px;
    --sidebar-width: 360px;
    --radius: 12px;

    /* Typography */
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Dynamic Engine Vars */
    --hue: 345; /* Rose HSL */
    --sat: 90%;
    
    /* Toast Specifics */
    --toast-bg:     var(--panel-bg);
    --toast-text:   var(--text-main);
    --toast-border: var(--panel-border);
}

/* =========================================
   DARK MODE OVERRIDES
   ========================================= */
[data-mode="dark"] {
    /* Semantic Remapping */
    --app-bg:       #0f172a; /* Slate 900 */
    --panel-bg:     #1e293b; /* Slate 800 */
    --panel-border: #334155; /* Slate 700 */
    
    --input-bg:     #020617; /* Slate 950 */
    --input-border: #475569; /* Slate 600 */
    --input-focus-ring: rgba(244, 63, 94, 0.25);
    
    --text-main:    #f8fafc; /* Slate 50 */
    --text-body:    #cbd5e1; /* Slate 300 */
    --text-mute:    #94a3b8; /* Slate 400 */
    
    --brand-surface: rgba(225, 29, 72, 0.1);

    /* Dark Mode Shadows */
    --shadow-sm:    0 1px 2px 0 rgb(0 0 0 / 0.5);
    --shadow-md:    0 4px 6px -1px rgb(0 0 0 / 0.5);
    --shadow-xl:    0 20px 25px -5px rgb(0 0 0 / 0.5);
    
    --toast-bg:     var(--panel-bg);
    --toast-text:   var(--text-main);
    --toast-border: var(--panel-border);
}

/* =========================================
   BRAND ACCENT LOGIC
   ========================================= */

/* 1. ROSE (Default) */
body[data-color="rose"] { 
    --brand-color:  #e11d48; 
    --brand-hover:  #be123c;
    --brand-active: #f43f5e;
    --brand-surface: #fff1f2;
    --hue: 345; --sat: 85%;
}
[data-mode="dark"][data-color="rose"] { --brand-surface: rgba(225, 29, 72, 0.15); }

/* 2. BLUE */
body[data-color="blue"] { 
    --brand-color:  #2563eb; 
    --brand-hover:  #1d4ed8; 
    --brand-active: #3b82f6;
    --brand-surface: #eff6ff;
    --input-focus-ring: rgba(37, 99, 235, 0.15);
    --hue: 220; --sat: 90%;
}
[data-mode="dark"][data-color="blue"] { 
    --brand-color: #3b82f6; 
    --brand-hover: #60a5fa;
    --brand-surface: rgba(59, 130, 246, 0.15);
    --input-focus-ring: rgba(59, 130, 246, 0.25);
}

/* 3. PURPLE */
body[data-color="purple"] { 
    --brand-color:  #7c3aed; 
    --brand-hover:  #6d28d9; 
    --brand-active: #8b5cf6;
    --brand-surface: #f5f3ff;
    --input-focus-ring: rgba(124, 58, 237, 0.15);
    --hue: 265; --sat: 85%;
}
[data-mode="dark"][data-color="purple"] {
    --brand-color: #8b5cf6;
    --brand-hover: #a78bfa;
    --brand-surface: rgba(139, 92, 246, 0.15);
    --input-focus-ring: rgba(139, 92, 246, 0.25);
}

/* 4. GREEN */
body[data-color="green"] { 
    --brand-color:  #059669; 
    --brand-hover:  #047857; 
    --brand-active: #10b981;
    --brand-surface: #ecfdf5;
    --input-focus-ring: rgba(5, 150, 105, 0.15);
    --hue: 160; --sat: 75%;
}
[data-mode="dark"][data-color="green"] {
    --brand-color: #10b981;
    --brand-hover: #34d399;
    --brand-surface: rgba(16, 185, 129, 0.15);
    --input-focus-ring: rgba(16, 185, 129, 0.25);
}

/* 5. ORANGE */
body[data-color="orange"] { 
    --brand-color:  #ea580c; 
    --brand-hover:  #c2410c; 
    --brand-active: #f97316;
    --brand-surface: #fff7ed;
    --input-focus-ring: rgba(234, 88, 12, 0.15);
    --hue: 25; --sat: 95%;
}
[data-mode="dark"][data-color="orange"] {
    --brand-color: #f97316;
    --brand-hover: #fb923c;
    --brand-surface: rgba(249, 115, 22, 0.15);
    --input-focus-ring: rgba(249, 115, 22, 0.25);
}

/* 6. MONOCHROME */
body[data-color="mono"] { 
    --brand-color:  #171717; 
    --brand-hover:  #000000; 
    --brand-active: #404040;
    --brand-surface: #f5f5f5;
    --input-focus-ring: rgba(0, 0, 0, 0.1);
    --hue: 0; --sat: 0%;
}
[data-mode="dark"][data-color="mono"] {
    --brand-color: #f8fafc;
    --brand-hover: #e2e8f0;
    --brand-active: #cbd5e1;
    --brand-surface: rgba(255, 255, 255, 0.1);
    --input-focus-ring: rgba(255, 255, 255, 0.15);
}