/* ═══════════════════════════════════════════════════════
   Color Palette — Unified Design System
   Prop Estate — Commercial Real Estate
   ═══════════════════════════════════════════════════════
   This file is the single source of truth for all colors
   across the public frontend. Change colors here to
   update the entire website from one place.
   ═══════════════════════════════════════════════════════ */

:root {
    /* ── Core Brand ── */
    --primary: #6C60FE;
    --primary-light: #8a80ff;
    --primary-dark: #4a3fd4;
    --primary-rgb: 108, 96, 254;

    --accent: #FD3358;
    --accent-hover: #e82a4a;
    --accent-rgb: 253, 51, 88;

    /* ── Dark Spectrum ── */
    --dark: #1E1D85;
    --darker: #0f0e4a;
    --dark-bg: #171766;
    --dark-rgb: 30, 29, 133;

    /* ── Surfaces ── */
    --bg: #f7f6ff;
    --bg-warm: #fff7ef;
    --bg-subtle: var(--surface-alt);
    --bg-input: #e2e0ff;
    --surface: #ffffff;
    --surface-alt: #f8fafc;

    /* ── Text ── */
    --text: #333333;
    --text-secondary: #444444;
    --text-muted: #777777;
    --text-faint: #aaaaaa;
    --heading-color: #1E1D85;

    /* ── Borders ── */
    --border: #dddbf7;
    --border-soft: #e4e2f7;
    --border-light: var(--border-light);
    --border-card: #cfcbff;

    /* Standardized Brand Gradients for Dynamic Light UI */
    --gradient-hero: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    --gradient-brand: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    --gradient-soft: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15) 0%, rgba(var(--primary-rgb), 0.05) 100%);
    --gradient-accent: linear-gradient(135deg, var(--primary) 0%, var(--info-color) 100%);
    --gradient-progress: linear-gradient(90deg, var(--primary), var(--info-color));

    --gradient-prop: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 50%, #06b6d4 100%);
    --gradient-prop-soft: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08) 0%, rgba(var(--primary-rgb), 0.03) 100%);

    /* ── Shadows ── */
    --shadow: 0 8px 32px rgba(108, 96, 254, 0.12);
    --shadow-hover: 0 16px 48px rgba(108, 96, 254, 0.22);
    --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08), 0 20px 40px rgba(0, 0, 0, 0.06);
    --shadow-dropdown: 0px 4px 20px -3px rgb(22 36 62 / 15%);

    /* ── Semantic ── */
    --success: #10B981;
    --warning: #ffc107;
    --info-color: #ed8a00;

    /* ── Layout ── */
    --radius: 16px;
    --radius-sm: 10px;
    --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════
   Dark Mode Palette — Medically Calming Slates & Indigos
   ═══════════════════════════════════════════════════════ */
:root.dark-mode {
    /* Surfaces */
    --bg: #0f111a;
    --bg-warm: #131622;
    --bg-subtle: #1a1d2e;
    --bg-input: #1a1d2d;
    --surface: #151825;
    --surface-alt: #1a1d2e;

    /* Text (High contrast yet soft) */
    --text: #e2e8f0;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-faint: #64748b;
    --heading-color: #f8fafc;

    /* Borders */
    --border: #23283f;
    --border-soft: #2a304b;
    --border-light: #23283f;
    --border-card: #2a304b;

    /* Adjusted Brand Gradients for Dark UI */
    --gradient-hero: linear-gradient(135deg, #0f111a 0%, #151825 50%, var(--primary-dark) 100%);
    --gradient-brand: linear-gradient(135deg, var(--primary) 0%, rgba(var(--primary-rgb), 0.5) 100%);
    --gradient-soft: linear-gradient(135deg, rgba(var(--primary-rgb), 0.2) 0%, rgba(var(--primary-rgb), 0.05) 100%);

    /* Semantic Shadows */
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.2);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4), 0 20px 40px rgba(0, 0, 0, 0.3);
    --shadow-dropdown: 0px 4px 20px -3px rgba(0, 0, 0, 0.5);
}

/* ─────────────  GLOBAL READING PROGRESS BAR  ───────────── */
.reading-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--gradient-progress);
    z-index: 9999;
    transition: width 0.15s linear;
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.4);
    pointer-events: none;
}