/* ═══════════════════════════════════════════════════════════
   ALCATRAZ BRAND COLORS - ORANGE PRIMARY
   Primary Color: #FF4500 (Alcatraz Orange)
   Updated: April 8, 2026
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ═══════════════════════════════════════════════════════
       SURFACES — Light Mode System
       ═══════════════════════════════════════════════════════ */
    --black: #F8FAFC;           /* Page background (light gray-blue) */
    --dark: #F1F5F9;            /* Secondary background */
    --card: #FFFFFF;            /* Card/panel background (pure white) */
    --card-hover: #1F1F24;      /* Card hover state */
    --border: #E2E8F0;          /* Standard border color */
    --border-light: #CBD5E1;    /* Lighter border variant */
    --muted: #94A3B8;           /* Tertiary text / placeholders */
    --light: #64748B;           /* Secondary text */
    --white: #0F172A;           /* Primary text (inverted name for compatibility) */
    
    /* ═══════════════════════════════════════════════════════
       PRIMARY BRAND COLOR — ALCATRAZ ORANGE
       ═══════════════════════════════════════════════════════ */
    --orange: #FF4500;
    --orange-dim: #CC3700;
    --orange-light: #FF6A33;
    --orange-glow: rgba(255, 69, 0, 0.15);
    --orange-subtle: rgba(255, 69, 0, 0.08);
    --orange-border: rgba(255, 69, 0, 0.22);
    
    /* Primary aliases for backwards compatibility */
    --primary: var(--orange);
    --primary-light: var(--orange-light);
    --primary-dim: var(--orange-dim);
    --primary-glow: var(--orange-glow);
    --primary-subtle: var(--orange-subtle);
    --primary-border: var(--orange-border);
    
    /* Alcatraz aliases */
    --az-orange: var(--orange);
    --az-orange-dark: var(--orange-dim);
    --az-orange-light: #FFF3EE;
    --az-orange-subtle: var(--orange-subtle);
    --az-orange-glow: var(--orange-glow);
    
    /* ═══════════════════════════════════════════════════════
       FUNCTIONAL COLORS (Green for success only)
       ═══════════════════════════════════════════════════════ */
    --green: #00D47E;
    --green-subtle: rgba(0, 212, 126, 0.06);
    --green-border: rgba(0, 212, 126, 0.18);
    --green-glow: rgba(0, 212, 126, 0.12);
    
    --amber: #F59E0B;
    --amber-subtle: rgba(255, 179, 71, 0.08);
    --amber-border: rgba(255, 179, 71, 0.2);
    
    --red: #EF4444;
    --red-subtle: rgba(239, 68, 68, 0.08);
    --red-border: rgba(239, 68, 68, 0.2);
    
    --purple: #A78BFA;
    --purple-subtle: rgba(167, 139, 250, 0.08);
    
    /* ═══════════════════════════════════════════════════════
       DRIVE/DRIVE.AZ COMPATIBILITY
       Map drive-* variables to Alcatraz Orange
       ═══════════════════════════════════════════════════════ */
    --drive-primary: var(--orange);
    --drive-primary-dim: var(--orange-dim);
    --drive-primary-light: var(--orange-light);
    --drive-primary-glow: var(--orange-glow);
    --drive-primary-subtle: var(--orange-subtle);
    
    --drive-accent: var(--amber);
    --drive-accent-dim: #D97706;
    --drive-accent-glow: var(--amber-subtle);
    --drive-accent-subtle: var(--amber-subtle);
    
    --drive-success: var(--green);
    --drive-warning: var(--amber);
    --drive-error: var(--red);
    --drive-info: #5C9EFF;
    
    /* ═══════════════════════════════════════════════════════
       ALCATRAZ/AZ COMPATIBILITY
       ═══════════════════════════════════════════════════════ */
    --az-black: var(--black);
    --az-dark: var(--dark);
    --az-card: var(--card);
    --az-border: var(--border);
    --az-muted: var(--muted);
    --az-light: var(--light);
    --az-white: var(--white);
    
    /* AZ Green for success states */
    --az-green: var(--green);
    --az-green-dark: #00B86B;
    --az-green-light: #E6FBF1;
    
    /* Brand blue compatibility (legacy) — maps to orange for Alcatraz */
    --brand-blue: var(--orange);
    --brand-blue-dark: var(--orange-dim);
    --brand-blue-light: #FFF3EE;
    --brand-blue-mid: var(--orange-light);
    
    /* CRITICAL: Prevent SI Blue bleedthrough - map all blue references to orange */
    --blue: var(--orange);
    --blue-dim: var(--orange-dim);
    --blue-light: var(--orange-light);
    --blue-glow: var(--orange-glow);
    --blue-subtle: var(--orange-subtle);
    --blue-border: var(--orange-border);
    
    --si-blue: var(--orange);  /* Map SI blue to Alcatraz orange */
    --si-blue-light: var(--orange-light);
    --si-blue-dim: var(--orange-dim);
    --si-blue-glow: var(--orange-glow);
    --si-blue-subtle: var(--orange-subtle);
    --si-blue-border: var(--orange-border);
    
    /* Primary color alias */
    --primary-color: var(--orange);
    --primary-blue: var(--orange);  /* Maps "blue" to orange for AZ theme */
}

/* ═══════════════════════════════════════════════════════════
   USAGE GUIDE — ALCATRAZ THEME
   ═══════════════════════════════════════════════════════════
   
   PRIMARY BRAND (Buttons, CTAs, Links, Active States):
   - Use: var(--orange) or var(--primary) or var(--az-orange)
   - Hover: var(--orange-light)
   - Pressed: var(--orange-dim)
   - Glow: var(--orange-glow)
   - Background: var(--orange-subtle)
   - Border: var(--orange-border)
   
   SUCCESS / POSITIVE (Completed, Success messages):
   - Use: var(--green)
   - Background: var(--green-subtle)
   - Border: var(--green-border)
   
   WARNING (Due soon, needs attention):
   - Use: var(--amber)
   - Background: var(--amber-subtle)
   
   ERROR / URGENT (Overdue, errors):
   - Use: var(--red)
   - Background: var(--red-subtle)
   
   NEUTRAL (Inactive, secondary):
   - Use: var(--light) or var(--muted)
   
   ═══════════════════════════════════════════════════════════ */