/* ==========================================
   NAIROREEL CLIENT PORTAL - THEME SYSTEM

   "Controlled Vibrancy" — 70/20/10
   70% neutral, 20% brand atmosphere, 10% action red
   ========================================== */

/* ========================================
   1. BRAND COLORS (Immutable)
   ======================================== */
:root {
    --color-red: #EA1821;
    --color-red-hover: #d01419;
    --color-indigo: #180161;
    --color-pink: #EB3678;
    --color-purple: #4F1787;
    --color-orange: #FB773C;
    --color-black: #000000;
    --color-white: #FAFAFA;
}

/* ========================================
   2. GRADIENT DEFINITIONS
   ======================================== */
:root {
    /* The NAIROREEL Gradient — full palette, 135deg */
    --gradient-brand: linear-gradient(135deg, #180161 0%, #4F1787 25%, #EB3678 50%, #EA1821 75%, #FB773C 100%);

    /* Muted — for dark mode hero backgrounds */
    --gradient-brand-muted: linear-gradient(
        135deg,
        rgba(24, 1, 97, 0.4) 0%,
        rgba(79, 23, 135, 0.3) 25%,
        rgba(235, 54, 120, 0.2) 50%,
        rgba(234, 24, 33, 0.15) 75%,
        rgba(251, 119, 60, 0.1) 100%
    );

    /* Animated gradient blobs (hero) */
    --blob-bg1: #180161;
    --blob-bg2: #0a0024;
    --blob-color1: 79, 23, 135;      /* purple */
    --blob-color2: 235, 54, 120;     /* pink */
    --blob-color3: 251, 119, 60;     /* orange */
    --blob-color4: 234, 24, 33;      /* red */
    --blob-color5: 24, 1, 97;        /* deep indigo */
    --blob-opacity: 1;
    --blob-blend: hard-light;
    --blob-size: 80%;
    --blob-blur: 40px;

    /* Page accent line slices */
    --gradient-dashboard: linear-gradient(90deg, #EB3678, #FB773C);
    --gradient-projects: linear-gradient(90deg, #4F1787, #EB3678);
    --gradient-meetings: linear-gradient(90deg, #180161, #4F1787);
    --gradient-invoices: linear-gradient(90deg, #EA1821, #FB773C);
    --gradient-files: linear-gradient(90deg, #4F1787, #EA1821);
    --gradient-notifications: linear-gradient(90deg, #EB3678, #FB773C);
    --gradient-profile: linear-gradient(90deg, #EB3678, #EA1821);
    --gradient-support: linear-gradient(90deg, #FB773C, #EA1821);
}

/* ========================================
   3. DARK MODE (Default)
   ======================================== */
:root,
[data-theme="dark"] {
    /* Backgrounds */
    --bg-base: #000000;
    --bg-surface: rgba(255, 255, 255, 0.03);
    --bg-elevated: rgba(255, 255, 255, 0.06);
    --bg-hover: rgba(255, 255, 255, 0.05);

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.6);
    --text-muted: rgba(255, 255, 255, 0.35);

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-medium: rgba(255, 255, 255, 0.2);

    /* Action */
    --action-primary: var(--color-red);
    --action-primary-hover: #ffffff;
    --action-primary-hover-text: #000000;
    --action-focus: var(--color-red);

    /* Accent Tints (backgrounds) */
    --tint-red: rgba(234, 24, 33, 0.15);
    --tint-indigo: rgba(24, 1, 97, 0.15);
    --tint-pink: rgba(235, 54, 120, 0.15);
    --tint-purple: rgba(79, 23, 135, 0.15);
    --tint-orange: rgba(251, 119, 60, 0.15);

    /* Accent Borders */
    --border-red: rgba(234, 24, 33, 0.3);
    --border-indigo: rgba(24, 1, 97, 0.3);
    --border-pink: rgba(235, 54, 120, 0.3);
    --border-purple: rgba(79, 23, 135, 0.3);
    --border-orange: rgba(251, 119, 60, 0.3);

    /* Glass / Atmospheric */
    --glass-bg: rgba(0, 0, 0, 0.55);
    --glass-blur: 30px;
    --glass-card-bg: rgba(255, 255, 255, 0.03);
    --glass-card-border: rgba(255, 255, 255, 0.1);
    --noise-opacity: 0.03;
    --gradient-gif-opacity: 0.6;

    /* Shadows */
    --shadow-card: none;
    --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.5);

    /* Header (Dark Mode Defaults) */
    --header-bg: rgba(10, 10, 10, 0.2);
    --header-border: rgba(255, 255, 255, 0.1);
    --header-text: #ffffff;

    /* Modal */
    --modal-bg: rgba(0, 0, 0, 0.9);
    --modal-overlay: rgba(0, 0, 0, 0.6);

    /* Semantic Status */
    --status-success: #10b981;
    --status-warning: #f59e0b;
    --status-error: #EA1821;
    --status-info: #3b82f6;
}

/* ========================================
   4. LIGHT MODE
   ======================================== */
[data-theme="light"] {
    /* Backgrounds: Clean & Warm */
    --bg-base: #F8F9FA;
    --bg-surface: #FFFFFF;
    --bg-elevated: #F1F3F5;
    --bg-hover: rgba(79, 23, 135, 0.04);

    /* Typography: Deep Charcoal for Serif Impact */
    --text-primary: #0A0A0A;
    --text-secondary: #4A4A4A;
    --text-muted: #8E8E93;

    /* Header: "Crystal" White */
    --header-bg: rgba(255, 255, 255, 0.2);
    --header-border: rgba(0, 0, 0, 0.12);
    --header-text: #0A0A0A;

    /* Borders */
    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-default: rgba(0, 0, 0, 0.08);
    --border-medium: rgba(0, 0, 0, 0.15);

    /* Action */
    --action-primary-hover: #000000;
    --action-primary-hover-text: #ffffff;

    /* Accent Tints — refined for editorial subtlety */
    --tint-red: rgba(234, 24, 33, 0.06);
    --tint-indigo: rgba(24, 1, 97, 0.06);
    --tint-pink: rgba(235, 54, 120, 0.06);
    --tint-purple: rgba(79, 23, 135, 0.06);
    --tint-orange: rgba(251, 119, 60, 0.06);

    /* Accent Borders — reduced */
    --border-red: rgba(234, 24, 33, 0.2);
    --border-indigo: rgba(24, 1, 97, 0.2);
    --border-pink: rgba(235, 54, 120, 0.2);
    --border-purple: rgba(79, 23, 135, 0.2);
    --border-orange: rgba(251, 119, 60, 0.2);

    /* Glass / Atmospheric */
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-blur: 20px;
    --glass-card-bg: #ffffff;
    --glass-card-border: rgba(0, 0, 0, 0.06);
    --noise-opacity: 0.015;
    --gradient-gif-opacity: 0.25;

    /* Animated gradient blobs — elevated purple palette */
    --blob-bg1: #c4a8e0;
    --blob-bg2: #e4d6f2;
    --blob-color1: 79, 23, 135;       /* brand purple */
    --blob-color2: 120, 40, 190;      /* deep violet */
    --blob-color3: 168, 85, 247;      /* vivid purple */
    --blob-color4: 235, 54, 120;      /* pink */
    --blob-color5: 24, 1, 97;         /* deep indigo */
    --blob-opacity: 0.75;
    --blob-blend: soft-light;
    --blob-blur: 30px;

    /* Muted gradient for light mode */
    --gradient-brand-muted: linear-gradient(
        135deg,
        rgba(79, 23, 135, 0.12) 0%,
        rgba(109, 40, 180, 0.08) 25%,
        rgba(168, 85, 247, 0.06) 50%,
        rgba(235, 54, 120, 0.04) 75%,
        rgba(192, 132, 252, 0.03) 100%
    );

    /* Shadows: The "Floating" Effect */
    --shadow-card: 0 12px 30px -10px rgba(0, 0, 0, 0.04), 0 4px 10px -5px rgba(0, 0, 0, 0.02);
    --shadow-dropdown: 0 20px 40px rgba(0, 0, 0, 0.1);

    /* Modal */
    --modal-bg: rgba(255, 255, 255, 0.95);
    --modal-overlay: rgba(0, 0, 0, 0.4);
}

/* ========================================
   5. THEME-AWARE BASE OVERRIDES
   Apply theme variables to body
   ======================================== */
[data-theme="light"] body,
[data-theme="light"].client-portal {
    background-color: var(--bg-base);
    color: var(--text-primary);
}

/* Noise texture opacity adapts to theme */
[data-theme="light"] body::before {
    opacity: var(--noise-opacity);
}