/* ===================================================
   LOVE2DEV – COLOR SYSTEM
   Professional Software Architect / AI Product Founder
   =================================================== */

:root {

/* =====================================
       1. BRAND PALETTE (DO NOT USE DIRECTLY)
       ===================================== */

    /* Core Brand */
    --brand-black: #111111;
    --brand-charcoal: #1E1E1E;
    --brand-red-deep: #8B0000;
    --brand-red: #B00020;
    --brand-red-bright: #D71920;

    /* Accent */
    --brand-accent: #7FA6B8;
    --brand-accent-hover: #668FA2;

    /* Optional Authority / Premium Accent */
    --brand-gold: #C9A44C;
    --brand-gold-soft: #E6D3A3;

    /* Neutrals */
    --brand-slate-950: #0E1116;
    --brand-slate-900: #161A21;
    --brand-slate-800: #252B33;
    --brand-slate-700: #343B45;
    --brand-slate-600: #5F6670;
    --brand-slate-500: #7B838E;
    --brand-slate-400: #A8B0B8;
    --brand-slate-300: #C8CED5;
    --brand-slate-200: #D8DEE3;
    --brand-slate-100: #EEF1F3;
    --brand-slate-50: #F7F7F4;

    --brand-white: #FFFFFF;

    /* Status */
    --brand-success: #1F8F6B;
    --brand-warning: #D39E00;
    --brand-danger: #C0362C;


    /* =====================================
       2. SEMANTIC UI COLORS - LIGHT THEME
       ===================================== */

    /* Text */
    --color-text-primary: var(--brand-black);
    --color-text-secondary: var(--brand-slate-600);
    --color-text-muted: var(--brand-slate-500);
    --color-text-inverse: var(--brand-white);

    /* Backgrounds */
    --color-bg-app: var(--brand-slate-50);
    --color-bg-surface: var(--brand-white);
    --color-bg-elevated: var(--brand-white);
    --color-bg-strong: var(--brand-black);
    --color-bg-overlay: rgba(0, 0, 0, 0.45);

    /* Navigation / Header */
    --color-nav-bg: var(--brand-black);
    --color-nav-text: var(--brand-white);
    --color-nav-active: var(--brand-red-bright);
    --color-nav-border: rgba(255, 255, 255, 0.12);

    /* Primary Actions */
    --color-accent-primary: var(--brand-red);
    --color-accent-secondary: var(--brand-accent);

    /* Buttons */
    --color-btn-primary-bg: var(--brand-red);
    --color-btn-primary-text: var(--brand-white);
    --color-btn-primary-hover: var(--brand-red-bright);

    --color-btn-secondary-bg: var(--brand-black);
    --color-btn-secondary-text: var(--brand-white);
    --color-btn-secondary-hover: var(--brand-charcoal);

    --color-btn-accent-bg: var(--brand-accent);
    --color-btn-accent-text: var(--brand-black);
    --color-btn-accent-hover: var(--brand-accent-hover);

    --color-btn-premium-bg: var(--brand-gold);
    --color-btn-premium-text: #2A2208;
    --color-btn-premium-hover: #B8963F;

    --color-btn-disabled-bg: var(--brand-slate-200);
    --color-btn-disabled-text: var(--brand-slate-500);

    /* Borders & Dividers */
    --color-border-subtle: rgba(17, 17, 17, 0.10);
    --color-border-strong: rgba(17, 17, 17, 0.22);

    /* Forms */
    --color-input-bg: var(--brand-white);
    --color-input-text: var(--color-text-primary);
    --color-input-border: var(--color-border-subtle);
    --color-input-focus: var(--brand-red);

    /* Status / Feedback */
    --color-success: var(--brand-success);
    --color-warning: var(--brand-warning);
    --color-danger: var(--brand-danger);

    /* Interactive states */
    --color-focus-ring: rgba(176, 0, 32, 0.28);
    --color-hover-overlay: rgba(17, 17, 17, 0.04);
    --color-surface-hover: rgba(17, 17, 17, 0.06);

    /* Cards / Panels */
    --color-card-bg: var(--color-bg-surface);
    --color-card-border: var(--color-border-subtle);

    /* Links */
    --color-link: var(--brand-red);
    --color-link-hover: var(--brand-red-bright);

    /* Status indicators */
    --color-status-active: var(--brand-red);
    --color-status-locked: var(--brand-slate-400);
    --color-status-premium: var(--brand-gold);
    --color-status-online: var(--brand-success);
    --color-status-offline: var(--brand-danger);
    --color-status-degraded: var(--brand-warning);

    /* Maps / Routes / Visual Data */
    --color-map-route-primary: var(--brand-charcoal);

    /* =====================================
       LAYOUT & TYPOGRAPHY TOKENS
       ===================================== */

    /* Typography */
    --font-family-base: system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Ubuntu, sans-serif;

    --font-size-base: 16px;
    --line-height-base: 1.6;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-heading: 700;
    --line-height-heading: 1.25;

    /* Spacing (8pt-ish scale) */
    --spacing-xxs: 4px;
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Shadows */
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);

    /* Z-index layers */
    --z-header: 100;
    --z-overlay: 500;
    --z-modal: 1000;

    /* Links */
    --color-link: var(--brand-primary);

    /* App chrome sizes */
    --app-header-height: 56px;
    --app-nav-height: 64px;

    /* Overlay panel */
    --panel-min-height: 64px;
    --panel-max-height: 70vh;

    /* Z-index stack */
    --z-header: 100;
    --z-panel: 1000;
    --z-nav: 1800;
    --z-menu-overlay: 900;
    --z-menu: 1000;
    --z-map: 0;

    --color-status-online: var(--brand-success);
    --color-status-offline: var(--brand-danger);
    --color-status-degraded: var(--brand-warning);

    --color-map-route-primary:var(--brand-charcoal);
}

@media (prefers-color-scheme: dark) {
    :root {

/* Text */
    --color-text-primary: #F7F7F4;
    /* --color-text-secondary: #C8CED5; */
    --color-text-muted: #A8B0B8;
    --color-text-inverse: var(--brand-black);

    /* Backgrounds */
    --color-bg-app: var(--brand-slate-950);
    --color-bg-surface: var(--brand-slate-900);
    --color-bg-elevated: var(--brand-slate-800);
    --color-bg-strong: var(--brand-black);
    --color-bg-overlay: rgba(0, 0, 0, 0.70);

    /* Navigation */
    --color-nav-bg: var(--brand-black);
    --color-nav-text: var(--brand-white);
    --color-nav-active: var(--brand-red-bright);
    --color-nav-border: rgba(255, 255, 255, 0.12);

    /* Buttons */
    --color-btn-primary-bg: var(--brand-red);
    --color-btn-primary-text: var(--brand-white);
    --color-btn-primary-hover: var(--brand-red-bright);

    --color-btn-secondary-bg: var(--brand-slate-800);
    --color-btn-secondary-text: var(--brand-white);
    --color-btn-secondary-hover: var(--brand-slate-700);

    --color-btn-accent-bg: var(--brand-accent);
    --color-btn-accent-text: var(--brand-black);
    --color-btn-accent-hover: #9EBCCD;

    --color-btn-disabled-bg: var(--brand-slate-800);
    --color-btn-disabled-text: var(--brand-slate-500);

    /* Borders */
    --color-border-subtle: rgba(255, 255, 255, 0.10);
    --color-border-strong: rgba(255, 255, 255, 0.20);

    /* Forms */
    --color-input-bg: var(--brand-slate-800);
    --color-input-text: var(--color-text-primary);
    --color-input-border: var(--color-border-subtle);
    --color-input-focus: var(--brand-red-bright);

    /* Interactive states */
    --color-focus-ring: rgba(215, 25, 32, 0.35);
    --color-hover-overlay: rgba(255, 255, 255, 0.05);
    --color-surface-hover: rgba(255, 255, 255, 0.06);

    /* Cards / Panels */
    --color-card-bg: var(--color-bg-surface);
    --color-card-border: var(--color-border-subtle);

    /* Links */
    --color-link: #FF4A52;
    --color-link-hover: #FF6B72;

    /* Maps / Routes / Visual Data */
    --color-map-route-primary: var(--brand-accent);
    }
}