/** Generated from app-4.5/css/makati-mvp.css — do not edit by hand. */
:root {
            /* ============================================================
               MASTER PALETTE - Change these 6 values to re-skin the app
               Current theme: Blood Orange on Deep Navy
               ============================================================ */
            --palette-base:       #0B1426;
            --palette-surface:    #111C32;
            --palette-primary:    #E8430A;
            --palette-secondary:  #3B82F6;
            --palette-danger:     #EF4444;
            --palette-warning:    #F59E0B;

            /* === SEMANTIC: Backgrounds === */
            --bg-body:        var(--palette-base);
            --bg-card:        var(--palette-surface);
            --bg-card-hover:  #162040;
            --bg-header:      var(--palette-surface);
            --bg-input:       rgba(255,255,255,0.05);
            --bg-input-focus: rgba(255,255,255,0.08);

            /* === SEMANTIC: Accent (from --palette-primary) === */
            --accent:           var(--palette-primary);
            --accent-light:     #FF6B35;
            --accent-gradient:  linear-gradient(135deg, #E8430A 0%, #FF6B35 100%);
            --accent-glow:      rgba(232, 67, 10, 0.30);
            --accent-subtle:    rgba(232, 67, 10, 0.15);

            /* === SEMANTIC: Secondary (from --palette-secondary) === */
            --secondary:          var(--palette-secondary);
            --secondary-light:    #60A5FA;
            --secondary-gradient: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
            --secondary-glow:     rgba(59, 130, 246, 0.25);

            /* === SEMANTIC: Status Colors === */
            --success:          #22C55E;
            --success-light:    #4ADE80;
            --success-gradient: linear-gradient(135deg, #22c55e 0%, #4ade80 100%);
            --danger:           var(--palette-danger);
            --danger-light:     #F87171;
            --danger-gradient:  linear-gradient(135deg, #EF4444 0%, #F87171 100%);
            --warning:          var(--palette-warning);
            --warning-light:    #FBBF24;

            /* === SEMANTIC: Text === */
            --text-primary:   #E2E8F0;
            --text-secondary: #94A3B8;
            --text-muted:     #64748B;
            --text-on-accent: #FFFFFF;
            --text-white:     #ffffff;

            /* === SEMANTIC: Borders === */
            --border-subtle:  rgba(255,255,255,0.06);
            --border-medium:  rgba(255,255,255,0.12);
            --border-accent:  rgba(232, 67, 10, 0.30);

            /* === SEMANTIC: Shadows === */
            --shadow-soft:    0 2px 15px rgba(0, 0, 0, 0.2);
            --shadow-card:    0 4px 20px rgba(0, 0, 0, 0.3);
            --shadow-hover:   0 8px 30px rgba(0, 0, 0, 0.4);
            --shadow-accent:  0 4px 15px rgba(232, 67, 10, 0.35);
            --shadow-sidebar: 4px 0 25px rgba(0, 0, 0, 0.3);

            /* === SEMANTIC: Sidebar (preserves gorgeous design) === */
            --sidebar-bg:           linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
            --sidebar-text:         rgba(255,255,255,0.8);
            --sidebar-category:     var(--secondary-light);
            --sidebar-hover-bg:     var(--accent-subtle);
            --sidebar-hover-border: var(--accent-light);
            --sidebar-active-bg:    var(--accent-gradient);
            --sidebar-active-glow:  var(--shadow-accent);

            /* === BACKWARD COMPAT ALIASES (keep old var names working) === */
            --brand-blue:       var(--palette-secondary);
            --brand-blue-dark:  #1E3A8A;
            --brand-blue-light: var(--secondary-light);
            --brand-red:        var(--palette-danger);
            --brand-red-dark:   #DC2626;
            --brand-red-light:  var(--danger-light);
            --brand-navy:       #0F172A;
            --brand-navy-light: #1E293B;
            --blue-gradient:    var(--secondary-gradient);
            --red-gradient:     var(--danger-gradient);
            --navy-gradient:    var(--sidebar-bg);
            --green-gradient:   var(--success-gradient);
            --orange-gradient:  var(--accent-gradient);
            --teal-gradient:    linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%);
            --bg-sidebar:       var(--sidebar-bg);
            --text-dark:        var(--text-primary);
            --text-medium:      var(--text-secondary);
            --text-light:       var(--text-muted);

            /* === LAYOUT === */
            --sidebar-width: 260px;
            --header-height: 70px;
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-xl: 20px;
            --space-1: 4px;
            --space-2: 8px;
            --space-3: 12px;
            --space-4: 16px;
            --space-5: 24px;
            --space-6: 32px;
            --space-7: 48px;
            --space-8: 64px;
            --text-xs: 12px;
            --text-sm: 13px;
            --text-md: 14px;
            --text-base: 16px;
            --text-lg: 20px;
            --text-xl: 24px;
            --text-2xl: 32px;
            --lh-tight: 1.25;
            --lh-normal: 1.5;
        }