/**
 * CSS Custom Properties (Variables)
 * Centralized design tokens for the BLum transport website
 * Last updated: 2026-02-20
 */

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

:root {
    /* PRIMARY COLOR PALETTE - High Contrast for Outdoor Readability */
    --color-primary: #1a4d73;
    --color-primary-light: #2a5f8a;
    --color-primary-dark: #0d3554;

    --color-accent: #0a5c7a;
    --color-accent-light: #1a7c9a;
    --color-accent-dark: #044556;

    /* ACCENT SCALE */
    --accent: #1a4d73;
    --accent-strong: #2a5f8a;
    --accent-soft: rgba(26, 77, 115, 0.14);

    /* SEMANTIC COLORS - High visibility for outdoor use */
    --color-success: #0a7c3e;
    --color-warning: #d97706;
    --color-danger: #c41e1e;
    --color-info: #1a4d73;

    /* ALERT COLORS - For Updates & Alerts section */
    --color-alert-info: #1976d2;
    --color-alert-warning: #ed6c02;
    --color-alert-error: #d32f2f;
    --color-alert-success: #2e7d32;

    /* BADGE COLORS - For status indicators */
    --color-badge-new: #1976d2;
    --color-badge-urgent: #d32f2f;
    --color-badge-planned: #9c27b0;

    /* NEUTRAL COLORS */
    --color-white: #ffffff;
    --color-light: #f8f9fa;
    --color-light-gray: #e9ecef;
    --color-gray: #4a4a4a;
    --color-dark-gray: #2d2d2d;
    --color-dark: #1a1a1a;
    --color-black: #000000;

    /* BACKGROUND COLORS */
    --bg: #ffffff;
    --surface-1: #f8f9fa;
    --surface-2: #ffffff;
    --surface-3: #eef2f6;
    --bg-primary: var(--bg);
    --bg-secondary: var(--surface-1);
    --bg-tertiary: var(--surface-3);
    --bg-dark: var(--color-primary);

    /* TEXT COLORS - Maximum readability */
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-light: #868e96;
    --text-muted: #4a4a4a;

    /* CARD & COMPONENT BACKGROUNDS */
    --card-bg: #ffffff;
    --header-bg: #ffffff;
    --nav-hover: #f8f9fa;

    /* LINK COLORS */
    --link-color: #007bff;
    --link-hover: #0056b3;

    /* BORDER COLORS */
    --border-color: #dee2e6;
    --border-subtle: rgba(15, 23, 42, 0.12);
    --border-strong: rgba(15, 23, 42, 0.2);

    /* SHADOWS */
    --shadow: rgba(0, 0, 0, 0.1);
    --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-soft: 0 6px 18px rgba(0, 0, 0, 0.14);

    /* TYPOGRAPHY - Font Families */
    --font-family-primary: 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-family-headings: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;

    /* TYPOGRAPHY - Font Sizes */
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem; /* 36px */

    /* TYPOGRAPHY - Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* TYPOGRAPHY - Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* SPACING SCALE - Based on 4px grid */
    --space-1: 0.25rem; /* 4px */
    --space-2: 0.5rem; /* 8px */
    --space-3: 0.75rem; /* 12px */
    --space-4: 1rem; /* 16px */
    --space-5: 1.25rem; /* 20px */
    --space-6: 1.5rem; /* 24px */
    --space-8: 2rem; /* 32px */
    --space-10: 2.5rem; /* 40px */
    --space-12: 3rem; /* 48px */
    --space-16: 4rem; /* 64px */
    --space-20: 5rem; /* 80px */
    --space-24: 6rem; /* 96px */

    /* BORDER RADIUS */
    --radius-sm: 0.25rem; /* 4px */
    --radius-md: 0.5rem; /* 8px */
    --radius-lg: 0.75rem; /* 12px */
    --radius-xl: 1rem; /* 16px */
    --radius-full: 9999px;

    /* TRANSITIONS */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;

    /* Z-INDEX SCALE */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* BREAKPOINTS - For reference in media queries */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;

    /* LAYOUT */
    --container-max-width: 1400px;
    --content-max-width: 900px;
    --header-height: 4rem;

    /* LINE CARD COMPONENT TOKENS */
    --line-card-padding: var(--space-4);
    --line-card-padding-lg: var(--space-5);
    --line-card-radius: var(--radius-lg);
    --line-card-gap: var(--space-3);
    --line-card-border-width: 4px;

    /* BADGE TOKENS */
    --badge-height: 1.75rem;
    --badge-padding-x: var(--space-3);
    --badge-padding-y: var(--space-1);
    --badge-radius: var(--radius-sm);
    --badge-font-size: var(--font-size-xs);

    /* LINE NUMBER BADGE */
    --line-number-min-width: 3rem;
    --line-number-height: 2rem;
    --line-number-font-size: var(--font-size-base);

    /* SEARCH INPUT */
    --search-height: 2.75rem;
    --search-radius: var(--radius-md);
    --search-border-width: 1px;

    /* ACCESSIBILITY COLORS */
    --color-accessible: #0a7c3e;
    --color-not-accessible: #6c757d;
}

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

[data-theme='dark'] {
    /* ACCENT SCALE - Slightly desaturated for dark mode */
    --accent: #2b6ea8;
    --accent-strong: #2f78b6;
    --accent-soft: rgba(43, 110, 168, 0.18);

    /* PRIMARY PALETTE MAPPED TO DARK MODE ACCENT SCALE */
    --color-primary: var(--accent);
    --color-primary-light: var(--accent-strong);
    --color-primary-dark: #245f90;
    --color-accent: var(--accent);
    --color-accent-light: var(--accent-strong);
    --color-accent-dark: #245f90;

    /* BACKGROUND COLORS */
    --bg: #121417;
    --surface-1: #161a1f;
    --surface-2: #1c222a;
    --surface-3: #232b36;
    --bg-primary: var(--bg);
    --bg-secondary: var(--surface-1);
    --bg-tertiary: var(--surface-2);

    /* TEXT COLORS - Lightened for better contrast (WCAG AA compliance) */
    --text-primary: #e7edf3;
    --text-secondary: #c3cedb;
    --text-light: #9aa8b6;
    --text-muted: #b1bcc9;

    /* CARD & COMPONENT BACKGROUNDS */
    --card-bg: var(--surface-2);
    --header-bg: var(--surface-1);
    --nav-hover: var(--surface-3);

    /* LINK COLORS */
    --link-color: #7ab0de;
    --link-hover: #9ac6ea;

    /* BORDER COLORS */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.1);
    --border-color: var(--border-subtle);

    /* SHADOWS */
    --shadow: rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.22);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.32);
    --shadow-xl: 0 12px 28px rgba(0, 0, 0, 0.38);
    --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.35);

    /* NEUTRAL COLOR OVERRIDES for dark mode */
    --color-light: var(--surface-2);
    --color-light-gray: #2a313c;

    /* ALERT COLORS - Brighter for dark mode contrast */
    --color-alert-info: #64b5f6;
    --color-alert-warning: #ffb74d;
    --color-alert-error: #ef5350;
    --color-alert-success: #66bb6a;

    /* Note: --color-white is NOT flipped globally as it's used for text on dark buttons.
     Flipping it would cause dark text on dark backgrounds. */
}