:root {
    /* ═══════════════════════════════════════════════════════════════════════════
       CARD IN CLOUD - Professional Color System
       Primary: Indigo | Secondary: Violet | Accent: Cyan
       ═══════════════════════════════════════════════════════════════════════════ */

    /* ─────────────────── PRIMARY (Indigo) ─────────────────── */
    --primary-color: #4F46E5;
    --primary-light: #818CF8;
    --primary-dark: #3730A3;
    --primary-deep: #1E1B4B;

    /* ─────────────────── SECONDARY (Violet) ─────────────────── */
    --secondary-color: #7C3AED;
    --secondary-light: #A78BFA;
    --secondary-dark: #5B21B6;

    /* ─────────────────── ACCENT (Cyan - Cloud) ─────────────────── */
    --accent-color: #06B6D4;
    --accent-light: #67E8F9;
    --accent-dark: #0891B2;

    /* ─────────────────── BRAND GRADIENTS ─────────────────── */
    --brand-gradient: linear-gradient(135deg, #7C3AED 0%, #4F46E5 50%, #06B6D4 100%);
    --primary-gradient: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    --accent-gradient: linear-gradient(135deg, #06B6D4 0%, #4F46E5 100%);
    --sidebar-gradient: linear-gradient(180deg, #1E1B4B 0%, #111827 100%);

    /* ─────────────────── NEUTRALS / SURFACES ─────────────────── */
    --white: #FFFFFF;
    --background-light: #F8FAFC;
    --background-medium: #F1F5F9;
    --background-accent: #E2E8F0;
    --background-dark: #111827;

    /* ─────────────────── TEXT ─────────────────── */
    --text-dark: #111827;
    --text-medium: #4B5563;
    --text-light: #F9FAFB;
    --text-gray: #6B7280;
    --text-subtle: #9CA3AF;
    --text-placeholder: #CBD5E1;

    /* ─────────────────── BORDERS ─────────────────── */
    --border-light: #E2E8F0;
    --border-medium: #CBD5E1;
    --border-strong: #94A3B8;

    /* ─────────────────── SUCCESS ─────────────────── */
    --success-color: #10B981;
    --success-light: #6EE7B7;
    --success-dark: #059669;
    --success-deep: #047857;

    /* ─────────────────── DANGER ─────────────────── */
    --danger-color: #EF4444;
    --danger-light: #FCA5A5;
    --danger-dark: #DC2626;

    /* ─────────────────── WARNING ─────────────────── */
    --warning-color: #F59E0B;
    --warning-light: #FCD34D;
    --warning-dark: #D97706;
    --warning-deep: #B45309;

    /* ─────────────────── INFO ─────────────────── */
    --info-color: #06B6D4;
    --info-light: #67E8F9;
    --info-dark: #0891B2;

    /* ─────────────────── RGB HELPERS ─────────────────── */
    --primary-rgb: 79, 70, 229;
    --secondary-rgb: 124, 58, 237;
    --accent-rgb: 6, 182, 212;
    --success-rgb: 16, 185, 129;
    --danger-rgb: 239, 68, 68;
    --warning-rgb: 245, 158, 11;
    --info-rgb: 6, 182, 212;
    --black-rgb: 0, 0, 0;
    --white-rgb: 255, 255, 255;

    /* ─────────────────── DISABLED STATE ─────────────────── */
    --disabled-bg: var(--background-medium);
    --disabled-border: var(--border-medium);
    --disabled-text: var(--text-gray);
    --disabled-opacity: 0.6;

    /* ─────────────────── ALERT BACKGROUNDS ─────────────────── */
    --success-bg: #ECFDF5;
    --success-border: #A7F3D0;
    --success-text: #065F46;

    --danger-bg: #FEF2F2;
    --danger-border: #FECACA;
    --danger-text: #991B1B;

    --warning-bg: #FFFBEB;
    --warning-border: #FDE68A;
    --warning-text: #92400E;

    --info-bg: #ECFEFF;
    --info-border: #A5F3FC;
    --info-text: #155E75;

    /* ─────────────────── SIDEBAR ─────────────────── */
    --sidebar-bg: var(--primary-deep);
    --sidebar-divider: rgba(255, 255, 255, 0.1);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-active-bg: var(--primary-color);
    --sidebar-accent: var(--accent-color);

    /* ─────────────────── UTILITIES ─────────────────── */
    --focus-ring: rgba(79, 70, 229, 0.4);
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-colored: rgba(79, 70, 229, 0.25);
    --overlay-bg: rgba(17, 24, 39, 0.6);
    --link-color: var(--primary-color);
    --link-hover: var(--primary-dark);

    /* ─────────────────── FORMS ─────────────────── */
    --input-bg: var(--white);
    --input-bg-focus: #F5F3FF;
    --input-text: var(--text-dark);
    --input-text-focus: var(--text-dark);
    --input-border: var(--border-light);
    --input-border-focus: var(--primary-color);

    /* ─────────────────── SHADOWS ─────────────────── */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-primary: 0 4px 14px 0 rgba(79, 70, 229, 0.3);
    --shadow-secondary: 0 4px 14px 0 rgba(124, 58, 237, 0.3);

    /* ─────────────────── BORDER RADIUS ─────────────────── */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
}