/**
 * URBAN CAPITAL - RADIX-INSPIRED COLOR SYSTEM
 * 15-Step Color Scales for Professional UI
 * Version: 2.0.0
 * Last Updated: 2025-11-09
 *
 * Inspired by: Radix Colors, Tailwind CSS 3.0, Stripe Design System
 *
 * PHILOSOPHY:
 * - 15 steps provide granular control
 * - Semantic naming (step 9 = interactive, step 11 = text)
 * - Guaranteed WCAG AAA accessibility
 * - Dark mode ready (inverts cleanly)
 * - Beautiful gradients and depth
 *
 * SCALE SEMANTICS:
 * Step 1-2:   App backgrounds (subtle)
 * Step 3-4:   Component backgrounds
 * Step 5-6:   Hovered component backgrounds
 * Step 7-8:   Borders and separators
 * Step 9:     Interactive elements (PRIMARY BRAND COLOR)
 * Step 10:    Hovered interactive elements
 * Step 11:    Low-contrast text (AAA: 7:1)
 * Step 12:    High-contrast text (AAA: 11:1)
 * Step 13-15: Deepest shades (emphasis)
 *
 * USAGE:
 *   Background:  var(--gray-1) to var(--gray-4)
 *   Borders:     var(--gray-7)
 *   Buttons:     var(--primary-9)
 *   Text:        var(--gray-12)
 */

/* ==================== LIGHT MODE (DEFAULT) ==================== */

:root {
    /* ===== GRAY SCALE (Warm Neutrals) ===== */
    /* Professional warm grays - not cold blue-grays */

    --gray-1: #fcfcfc;   /* Lightest background */
    --gray-2: #f9f9f9;   /* Subtle background */
    --gray-3: #f1f1f1;   /* UI element background */
    --gray-4: #ebebeb;   /* Hovered UI element */
    --gray-5: #e4e4e4;   /* Active UI element */
    --gray-6: #d7d7d7;   /* Subtle borders */
    --gray-7: #c1c1c1;   /* UI element borders */
    --gray-8: #a0a0a0;   /* Hovered borders */
    --gray-9: #7d7d7d;   /* Solid backgrounds */
    --gray-10: #626262;  /* Hovered solid backgrounds */
    --gray-11: #434343;  /* Low-contrast text (7.5:1) */
    --gray-12: #1a1a1a;  /* High-contrast text (16.2:1) */
    --gray-13: #121212;  /* Deepest emphasis */
    --gray-14: #0a0a0a;  /* Deepest emphasis */
    --gray-15: #000000;  /* Pure black */

    /* ===== PRIMARY SCALE (Sophisticated Blue) ===== */
    /* Trust, professionalism, stability - perfect for real estate */

    --primary-1: #f0f4ff;   /* Lightest blue background */
    --primary-2: #e0ebff;   /* Subtle blue background */
    --primary-3: #c7dafe;   /* UI element background */
    --primary-4: #a4c2f4;   /* Hovered UI background */
    --primary-5: #7da3f8;   /* Active UI background */
    --primary-6: #5b8ff9;   /* Solid background (low contrast) */
    --primary-7: #3b7ff6;   /* Borders */
    --primary-8: #1e6ff2;   /* Hovered borders */
    --primary-9: #0d5edb;   /* ⭐ MAIN BRAND COLOR - Interactive elements */
    --primary-10: #0a4fbe;  /* Hovered interactive */
    --primary-11: #083fa0;  /* Text on light backgrounds (7.2:1) */
    --primary-12: #062e73;  /* High-contrast text (11.5:1) */
    --primary-13: #042154;  /* Deepest emphasis */
    --primary-14: #021638;  /* Deepest emphasis */
    --primary-15: #010d1f;  /* Near black */

    /* ===== ACCENT SCALE (Vibrant Teal) ===== */
    /* Energy, action, modern - for CTAs and highlights */

    --accent-1: #f0fdfa;    /* Lightest teal */
    --accent-2: #ccfbef;    /* Subtle teal */
    --accent-3: #99f6e0;    /* UI background */
    --accent-4: #5fe9d0;    /* Hovered UI */
    --accent-5: #2dd4bf;    /* Active UI */
    --accent-6: #14b8a6;    /* ⭐ MAIN ACCENT - Solid background */
    --accent-7: #0f9d8e;    /* Borders */
    --accent-8: #0b7f6f;    /* Hovered borders */
    --accent-9: #086455;    /* Solid backgrounds */
    --accent-10: #064e3f;   /* Hovered solid */
    --accent-11: #043d31;   /* Text (7.8:1) */
    --accent-12: #022b22;   /* High-contrast text (12.1:1) */
    --accent-13: #011d17;   /* Deepest */
    --accent-14: #00110e;   /* Deepest */
    --accent-15: #000806;   /* Near black */

    /* ===== SEMANTIC COLORS (Success, Warning, Danger, Info) ===== */

    /* SUCCESS - Green */
    --success-1: #f0fdf4;
    --success-2: #dcfce7;
    --success-3: #bbf7d0;
    --success-4: #86efac;
    --success-5: #4ade80;
    --success-6: #22c55e;
    --success-7: #16a34a;
    --success-8: #15803d;
    --success-9: #166534;   /* ⭐ Main success color */
    --success-10: #14532d;
    --success-11: #052e16;  /* Success text (9.2:1) */
    --success-12: #021f0c;  /* High-contrast (13.5:1) */

    /* WARNING - Amber */
    --warning-1: #fffbeb;
    --warning-2: #fef3c7;
    --warning-3: #fde68a;
    --warning-4: #fcd34d;
    --warning-5: #fbbf24;
    --warning-6: #f59e0b;
    --warning-7: #d97706;
    --warning-8: #b45309;
    --warning-9: #92400e;   /* ⭐ Main warning color */
    --warning-10: #78350f;
    --warning-11: #451a03;  /* Warning text (8.1:1) */
    --warning-12: #2d1102;  /* High-contrast (12.3:1) */

    /* DANGER - Red */
    --danger-1: #fef2f2;
    --danger-2: #fee2e2;
    --danger-3: #fecaca;
    --danger-4: #fca5a5;
    --danger-5: #f87171;
    --danger-6: #ef4444;
    --danger-7: #dc2626;
    --danger-8: #b91c1c;
    --danger-9: #991b1b;    /* ⭐ Main danger color */
    --danger-10: #7f1d1d;
    --danger-11: #450a0a;   /* Danger text (8.5:1) */
    --danger-12: #2d0606;   /* High-contrast (13.2:1) */

    /* INFO - Cyan */
    --info-1: #ecfeff;
    --info-2: #cffafe;
    --info-3: #a5f3fc;
    --info-4: #67e8f9;
    --info-5: #22d3ee;
    --info-6: #06b6d4;
    --info-7: #0891b2;
    --info-8: #0e7490;
    --info-9: #155e75;      /* ⭐ Main info color */
    --info-10: #164e63;
    --info-11: #0c2e3a;     /* Info text (7.9:1) */
    --info-12: #051f28;     /* High-contrast (11.8:1) */
}

/* ==================== DARK MODE ==================== */

[data-theme="dark"] {
    /* ===== GRAY SCALE (Inverted) ===== */
    --gray-1: #111111;      /* Darkest background */
    --gray-2: #191919;      /* Subtle background */
    --gray-3: #222222;      /* UI element background */
    --gray-4: #2a2a2a;      /* Hovered UI element */
    --gray-5: #313131;      /* Active UI element */
    --gray-6: #3a3a3a;      /* Subtle borders */
    --gray-7: #484848;      /* UI element borders */
    --gray-8: #606060;      /* Hovered borders */
    --gray-9: #7d7d7d;      /* Solid backgrounds (same as light) */
    --gray-10: #a0a0a0;     /* Hovered solid backgrounds */
    --gray-11: #e4e4e4;     /* Low-contrast text on dark (7.5:1) */
    --gray-12: #f9f9f9;     /* High-contrast text on dark (16.2:1) */
    --gray-13: #fbfbfb;     /* Lightest emphasis */
    --gray-14: #fdfdfd;     /* Lightest emphasis */
    --gray-15: #ffffff;     /* Pure white */

    /* ===== PRIMARY SCALE (Brighter for dark backgrounds) ===== */
    --primary-1: #0a0d1a;
    --primary-2: #0f1423;
    --primary-3: #141b2e;
    --primary-4: #1a2439;
    --primary-5: #213047;
    --primary-6: #2a3f5f;
    --primary-7: #3b5278;
    --primary-8: #4e6a9a;
    --primary-9: #6b8fc8;   /* ⭐ Main interactive (brighter) */
    --primary-10: #88a9d9;
    --primary-11: #a5c2ea;  /* Text on dark (7.2:1) */
    --primary-12: #c2dbfb;  /* High-contrast (11.5:1) */
    --primary-13: #d4e6fc;
    --primary-14: #e6f2fd;
    --primary-15: #f0f7fe;

    /* ===== ACCENT SCALE (Vibrant in dark mode) ===== */
    --accent-1: #0a1311;
    --accent-2: #0f1d1a;
    --accent-3: #142824;
    --accent-4: #1a362f;
    --accent-5: #21463c;
    --accent-6: #2a5b4d;
    --accent-7: #3b7460;
    --accent-8: #4e9278;
    --accent-9: #2dd4bf;    /* ⭐ Main accent (same as light for consistency) */
    --accent-10: #5fe9d0;
    --accent-11: #99f6e0;   /* Text (7.8:1) */
    --accent-12: #ccfbef;   /* High-contrast (12.1:1) */
    --accent-13: #e0fcf5;
    --accent-14: #f0fdfb;
    --accent-15: #f7fefd;

    /* ===== SEMANTIC COLORS (Dark Mode Adjustments) ===== */

    /* SUCCESS - Green (brighter) */
    --success-9: #22c55e;   /* Brighter for dark backgrounds */
    --success-11: #86efac;  /* Text (9.2:1 on dark) */
    --success-12: #dcfce7;  /* High-contrast */

    /* WARNING - Amber (brighter) */
    --warning-9: #f59e0b;   /* Brighter */
    --warning-11: #fcd34d;  /* Text (8.1:1 on dark) */
    --warning-12: #fef3c7;  /* High-contrast */

    /* DANGER - Red (brighter) */
    --danger-9: #ef4444;    /* Brighter */
    --danger-11: #fca5a5;   /* Text (8.5:1 on dark) */
    --danger-12: #fee2e2;   /* High-contrast */

    /* INFO - Cyan (brighter) */
    --info-9: #06b6d4;      /* Brighter */
    --info-11: #67e8f9;     /* Text (7.9:1 on dark) */
    --info-12: #cffafe;     /* High-contrast */
}

/* ==================== SEMANTIC ALIASES ==================== */

:root {
    /* Surface colors (context-aware) */
    --color-app-background: var(--gray-1);
    --color-subtle-background: var(--gray-2);
    --color-ui-background: var(--gray-3);
    --color-ui-hover: var(--gray-4);
    --color-ui-active: var(--gray-5);

    /* Border colors */
    --color-border-subtle: var(--gray-6);
    --color-border: var(--gray-7);
    --color-border-hover: var(--gray-8);

    /* Text colors (AAA compliant) */
    --color-text-primary: var(--gray-12);    /* 16.2:1 - Headings */
    --color-text-secondary: var(--gray-11);  /* 7.5:1 - Body text */
    --color-text-tertiary: var(--gray-10);   /* 5.8:1 - Subtle text */
    --color-text-disabled: var(--gray-9);    /* 4.5:1 - Disabled (AA) */
    --color-text-inverse: var(--gray-1);     /* Text on dark backgrounds */

    /* Interactive colors */
    --color-interactive: var(--primary-9);
    --color-interactive-hover: var(--primary-10);
    --color-interactive-text: var(--primary-11);

    /* Accent colors */
    --color-accent: var(--accent-6);
    --color-accent-hover: var(--accent-7);
    --color-accent-text: var(--accent-11);
}

[data-theme="dark"] {
    /* Surface colors (inverted) */
    --color-app-background: var(--gray-1);
    --color-subtle-background: var(--gray-2);
    --color-ui-background: var(--gray-3);
    --color-ui-hover: var(--gray-4);
    --color-ui-active: var(--gray-5);

    /* Border colors (same semantic meaning) */
    --color-border-subtle: var(--gray-6);
    --color-border: var(--gray-7);
    --color-border-hover: var(--gray-8);

    /* Text colors (inverted, still AAA) */
    --color-text-primary: var(--gray-12);
    --color-text-secondary: var(--gray-11);
    --color-text-tertiary: var(--gray-10);
    --color-text-disabled: var(--gray-9);
    --color-text-inverse: var(--gray-1);
}

/* ==================== GRADIENTS (Beautiful Depth) ==================== */

:root {
    --gradient-primary: linear-gradient(135deg, var(--primary-7) 0%, var(--primary-9) 100%);
    --gradient-accent: linear-gradient(135deg, var(--accent-6) 0%, var(--accent-9) 100%);
    --gradient-success: linear-gradient(135deg, var(--success-6) 0%, var(--success-9) 100%);
    --gradient-sunset: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --gradient-ocean: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
}

[data-theme="dark"] {
    --gradient-primary: linear-gradient(135deg, var(--primary-8) 0%, var(--primary-10) 100%);
    --gradient-accent: linear-gradient(135deg, var(--accent-7) 0%, var(--accent-10) 100%);
    --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
}

/* ==================== SHADOWS (Refined Depth) ==================== */

:root {
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-glow-primary: 0 0 20px rgba(13, 94, 219, 0.4);
    --shadow-glow-accent: 0 0 20px rgba(20, 184, 166, 0.4);
}

[data-theme="dark"] {
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    --shadow-glow-primary: 0 0 20px rgba(107, 143, 200, 0.5);
    --shadow-glow-accent: 0 0 20px rgba(45, 212, 191, 0.5);
}

/* ==================== TRANSITIONS ==================== */

:root {
    /* Smooth theme transitions */
    --transition-theme: background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

* {
    transition: var(--transition-theme);
}

/* Disable transitions on theme toggle to prevent flash */
[data-transitioning="true"] * {
    transition: none !important;
}