/* ============================================================================
   DESIGN TOKENS - Single Source of Truth
   ============================================================================

   All design tokens for the entire application: colors, spacing, typography,
   z-index, transitions, and component-specific values.

   This file MUST be loaded FIRST before any other stylesheets.

   Structure:
   ----------
   1. Brand Colors
   2. Surface Colors
   3. Text Colors
   4. Status Colors
   5. Border Colors
   6. Shadow Colors
   7. Charger Detail Panel Colors (--cdp-*)
   8. Panel System Tokens (from JS PANEL_COLORS/PANEL_ANIMATION/PANEL_LAYOUT)
   9. Spacing System
   10. Border Radius
   11. Typography
   12. Z-Index Layers
   13. Transitions & Animation
   14. Bootstrap Compatibility

   Migrated from: components/styles/variables.css
   JS constants absorbed: PANEL_COLORS, PANEL_ANIMATION, PANEL_LAYOUT
   Duplicates removed: --cdp-* vars (were in both variables.css & charger-detail-panel.css)
   ============================================================================ */

:root {

  /* ==========================================================================
     1. BRAND COLORS - Primary Identity
     ========================================================================== */

  --primary-color: #3dcc89;              /* Main brand green - actions, CTAs */
  --primary-color-hover: #33bb77;        /* Hover state for primary actions */
  --primary-color-light: #5ed9a0;        /* Light variant for backgrounds */
  --primary-color-dark: #2db870;         /* Dark variant for emphasis */
  --primary-rgb: 61, 204, 137;           /* RGB values for transparency */

  --secondary-color: #6c757d;            /* Secondary gray for less emphasis */
  --accent-color: #0d6efd;               /* Accent blue for highlights */


  /* ==========================================================================
     2. SURFACE COLORS - Backgrounds & Panels
     ========================================================================== */

  --background-light: #ffffff;           /* Primary surface - light mode */
  --background-dark: #1e2126;            /* Panel backgrounds - dark mode */
  --background-darker: #16181c;          /* Body background - darkest */
  --background-overlay: rgba(0, 0, 0, 0.5);  /* Modal overlays */

  --surface-elevated: #2a2d33;           /* Elevated cards/panels */
  --surface-hover: rgba(255, 255, 255, 0.05);  /* Hover state for surfaces */

  /* UI Component Backgrounds */
  --background-scrollbar-track: #1a1a1a;  /* Scrollbar track background */
  --background-button-hover-dark: #252525;  /* Dark button hover state */
  --background-slider-track: #444444;    /* Slider track background */
  --background-button-semi: rgba(0, 0, 0, 0.7);  /* Semi-transparent button */
  --background-button-hover-light: rgba(240, 240, 255, 0.92);  /* Light button hover with blue tint */
  --background-near-white: rgba(255, 255, 255, 0.95);  /* Near-white background */


  /* ==========================================================================
     3. TEXT COLORS - Typography Hierarchy
     ========================================================================== */

  --text-color: #e4e6eb;                 /* Primary text - high contrast */
  --text-secondary: #b0b3b8;             /* Secondary text - medium contrast */
  --text-muted: #8e8e8e;                 /* Muted text - low emphasis */
  --text-muted-accessible: #a3a3a3;      /* Muted text - WCAG AA (4.6:1 on #222) */
  --text-disabled: #6c757d;              /* Disabled state text */
  --text-near-white: #f1f1f1;            /* Near-white text for light backgrounds */
  --text-inverse: #212529;               /* Text on light backgrounds */
  --text-link: #0d6efd;                  /* Hyperlink color */
  --accent-black: #010101;               /* Near-black accent color */


  /* ==========================================================================
     4. STATUS COLORS - Success, Warning, Error States
     ========================================================================== */

  /* Success Colors - Available, Completed, Positive */
  --color-success: #3dcc89;              /* Primary success green */
  --color-success-alt: #28a745;          /* Bootstrap success variant */
  --color-success-light: #d1e7dd;        /* Light success background */
  --color-success-dark: #0a3622;         /* Dark success emphasis */
  --success-rgb: 61, 204, 137;           /* RGB for transparency */

  /* Warning Colors - Caution, Pending */
  --color-warning: #ffc107;              /* Warning yellow/amber */
  --color-warning-light: #fff3cd;        /* Light warning background */
  --color-warning-dark: #664d03;         /* Dark warning emphasis */

  /* Error/Danger Colors - Unavailable, Failed, Negative */
  --color-error: #dc3545;                /* Primary error red */
  --color-error-warning: #ff6b6b;        /* Lighter error for warnings */
  --color-error-light: #f8d7da;          /* Light error background */
  --color-error-dark: #58151c;           /* Dark error emphasis */

  /* Info Colors - Informational Messages */
  --color-info: #0dcaf0;                 /* Info cyan */
  --color-info-light: #cff4fc;           /* Light info background */
  --color-info-dark: #055160;            /* Dark info emphasis */


  /* ==========================================================================
     5. BORDER COLORS - Dividers & Outlines
     ========================================================================== */

  --border-light: #e9ecef;               /* Light borders for cards */
  --border-medium: #dee2e6;              /* Medium borders */
  --border-dark: #495057;                /* Dark borders */
  --border-divider: rgba(255, 255, 255, 0.08);  /* Subtle dividers */
  --border-translucent: rgba(0, 0, 0, 0.175);   /* Translucent borders */
  --border-glass: rgba(255, 255, 255, 0.1);     /* Glassmorphism borders */


  /* ==========================================================================
     6. SHADOW COLORS - Depth & Elevation
     ========================================================================== */

  --shadow-light: rgba(0, 0, 0, 0.1);    /* Subtle shadow */
  --shadow-medium: rgba(0, 0, 0, 0.15);  /* Medium shadow */
  --shadow-strong: rgba(0, 0, 0, 0.2);   /* Strong shadow */
  --shadow-focus: rgba(13, 110, 253, 0.25);  /* Focus ring shadow */
  --shadow-primary: rgba(61, 204, 137, 0.2);  /* Shadow with primary color tint */

  /* Pre-defined Shadow Styles */
  --box-shadow-sm: 0 0.125rem 0.25rem var(--shadow-light);
  --box-shadow: 0 0.5rem 1rem var(--shadow-medium);
  --box-shadow-lg: 0 1rem 3rem var(--shadow-strong);
  --box-shadow-inset: inset 0 1px 2px var(--shadow-light);

  /* Special Effects */
  --location-marker-pulse: rgba(13, 110, 253, 0.6);  /* Location marker animation color */


  /* ==========================================================================
     7. CHARGER DETAIL PANEL - Component-Specific Colors (--cdp-*)
     ==========================================================================
     Single declaration (was previously duplicated in charger-detail-panel.css)
     ========================================================================== */

  /* Surface Colors */
  --cdp-color-white: #ffffff;
  --cdp-color-black: #000000;
  --cdp-color-surface: #ffffff;
  --cdp-color-dark-bg: #121212;
  --cdp-color-dark-surface: #222222;

  /* Text Colors */
  --cdp-color-text-primary: #212529;
  --cdp-color-text-secondary: #6c757d;
  --cdp-color-text-muted: #8e8e8e;
  --cdp-color-text-disabled: #aaaaaa;
  --cdp-color-text-subtle: #888888;
  --cdp-color-text-expand: #606060;

  /* Background Colors */
  --cdp-color-bg-light: #f8f9fa;
  --cdp-color-bg-overlay-light: rgba(255, 255, 255, 0.1);
  --cdp-color-bg-overlay-hover: rgba(255, 255, 255, 0.15);

  /* Border Colors */
  --cdp-color-border-light: #e9ecef;
  --cdp-color-border-divider: rgba(255, 255, 255, 0.08);

  /* Status Colors */
  --cdp-color-success-primary: #3dcc89;
  --cdp-color-success-alt: #28a745;
  --cdp-color-error-primary: #dc3545;
  --cdp-color-error-warning: #ff6b6b;

  /* Shadow Colors */
  --cdp-shadow-light: rgba(0, 0, 0, 0.1);
  --cdp-shadow-medium: rgba(0, 0, 0, 0.15);
  --cdp-shadow-strong: rgba(0, 0, 0, 0.2);


  /* ==========================================================================
     8. PANEL SYSTEM TOKENS
     ==========================================================================
     Migrated from JS: window.PANEL_COLORS, window.PANEL_ANIMATION,
     window.PANEL_LAYOUT. These CSS variables are the canonical source;
     the JS constants should eventually read from these via getComputedStyle().

     TODO: Update JS files to read from CSS variables instead of hardcoded values:
       - components/js/03-floating_panel_init/00-floating_panel/03-panel_colors/01-panel_colors.js
       - components/js/03-floating_panel_init/00-floating_panel/01-panel_animation/01-panel_animation.js
       - components/js/03-floating_panel_init/00-floating_panel/04-panel_structure/02-panel_style/01-panel_structure.js
     ========================================================================== */

  /* Panel Colors (from PANEL_COLORS) */
  --panel-bg: rgba(30, 30, 30, 0.4);
  --panel-content-bg: rgba(50, 50, 50, 0.3);
  --panel-button-bg: rgba(0, 0, 0, 0.7);
  --panel-primary: #3e6ae1;              /* Tesla blue - accent for panels */
  --panel-text-primary: #ffffff;
  --panel-text-secondary: #8e8e8e;
  --panel-border: rgba(255, 255, 255, 0.1);

  /* Panel Animation (from PANEL_ANIMATION) */
  --panel-animation-duration: 300ms;
  --panel-animation-timing: ease;
  --panel-animation-translate: 10px;
  --panel-backdrop-blur: 8px;         /* Standardized blur for all panels */

  /* Panel Layout (from PANEL_LAYOUT) */
  --panel-mobile-breakpoint: 768px;
  --panel-safety-margin: 20px;
  --panel-content-padding: 15px;
  --panel-min-width: 250px;
  --panel-default-width: 330px;
  --panel-header-height: 60px;
  --panel-footer-height: 50px;


  /* ==========================================================================
     9. SPACING SYSTEM - 8px Grid
     ========================================================================== */

  --spacing-xs: 4px;                     /* Extra small spacing */
  --spacing-sm: 8px;                     /* Small spacing */
  --spacing-md: 16px;                    /* Medium spacing (base) */
  --spacing-lg: 24px;                    /* Large spacing */
  --spacing-xl: 32px;                    /* Extra large spacing */
  --spacing-xxl: 48px;                   /* 2x extra large spacing */

  --gap-xs: 4px;                         /* Flexbox/grid gaps */
  --gap-sm: 8px;
  --gap-md: 12px;
  --gap-lg: 16px;
  --gap-xl: 24px;


  /* ==========================================================================
     10. BORDER RADIUS - Consistent Rounded Corners
     ========================================================================== */

  --radius-none: 0;
  --radius-sm: 4px;                      /* Small radius - buttons */
  --radius-md: 8px;                      /* Medium radius - cards (8px rule) */
  --radius-lg: 12px;                     /* Large radius - panels */
  --radius-xl: 16px;                     /* Extra large radius */
  --radius-pill: 50rem;                  /* Pill shape */
  --radius-circle: 50%;                  /* Perfect circle */


  /* ==========================================================================
     11. TYPOGRAPHY - Font Families & Sizes
     ========================================================================== */

  /* Font Families */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", "Noto Sans", "Liberation Sans",
               Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;

  /* Font Sizes - Modular Scale (1.25 ratio) */
  --font-size-xs: 0.75rem;               /* 12px */
  --font-size-sm: 0.875rem;              /* 14px */
  --font-size-base: 1rem;                /* 16px - base */
  --font-size-md: 1.125rem;              /* 18px */
  --font-size-lg: 1.25rem;               /* 20px */
  --font-size-xl: 1.5rem;                /* 24px */
  --font-size-2xl: 2rem;                 /* 32px */
  --font-size-3xl: 2.5rem;               /* 40px */

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

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


  /* ==========================================================================
     12. Z-INDEX LAYERS - Stacking Order
     ========================================================================== */

  --z-base: 1;                           /* Base layer */
  --z-dropdown: 100;                     /* Dropdowns */
  --z-sticky: 200;                       /* Sticky headers */
  --z-fixed: 500;                        /* Fixed elements */
  --z-modal-backdrop: 900;               /* Modal backdrops */
  --z-modal: 1000;                       /* Modals */
  --z-popover: 1100;                     /* Popovers */
  --z-tooltip: 1200;                     /* Tooltips */
  --z-notification: 1300;                /* Notifications */
  --z-panel: 1200;                       /* Floating panels (default) */
  --z-panel-elevated: 1220;              /* Elevated panels (charger, filter, search, info) */
  --z-navigation: 2000;                  /* Navigation overlays (amenity loading) */
  --z-toast: 9000;                       /* Toast notifications */
  --z-critical: 10000;                   /* Critical error overlays */


  /* ==========================================================================
     13. TRANSITIONS & ANIMATION
     ========================================================================== */

  --transition-fast: 150ms;              /* Fast transitions */
  --transition-base: 300ms;              /* Base transition (default) */
  --transition-slow: 500ms;              /* Slow transitions */

  --easing-linear: linear;
  --easing-ease: ease;
  --easing-ease-in: ease-in;
  --easing-ease-out: ease-out;
  --easing-ease-in-out: ease-in-out;
  --easing-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);  /* Material Design */


  /* ==========================================================================
     14. BOOTSTRAP COMPATIBILITY - Legacy Variables
     ==========================================================================
     These override/mirror Bootstrap's CSS variables for consistency.
     TODO: Audit which of these are actually used; remove unused ones.
     ========================================================================== */

  /* Bootstrap Base Colors */
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;

  /* Bootstrap Gray Scale */
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;

  /* Bootstrap Semantic Colors */
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;

  /* Bootstrap RGB Values */
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;

  /* Bootstrap Text Emphasis */
  --bs-primary-text-emphasis: #052c65;
  --bs-secondary-text-emphasis: #2b2f32;
  --bs-success-text-emphasis: #0a3622;
  --bs-info-text-emphasis: #055160;
  --bs-warning-text-emphasis: #664d03;
  --bs-danger-text-emphasis: #58151c;
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;

  /* Bootstrap Background Subtle */
  --bs-primary-bg-subtle: #cfe2ff;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-info-bg-subtle: #cff4fc;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: #ced4da;

  /* Bootstrap Border Subtle */
  --bs-primary-border-subtle: #9ec5fe;
  --bs-secondary-border-subtle: #c4c8cb;
  --bs-success-border-subtle: #a3cfbb;
  --bs-info-border-subtle: #9eeaf9;
  --bs-warning-border-subtle: #ffe69c;
  --bs-danger-border-subtle: #f1aeb5;
  --bs-light-border-subtle: #e9ecef;
  --bs-dark-border-subtle: #adb5bd;

  /* Bootstrap Typography */
  --bs-font-sans-serif: var(--font-sans);
  --bs-font-monospace: var(--font-mono);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-text-align: start;
  --bs-body-color: #212529;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;

  /* Bootstrap Emphasis & Secondary */
  --bs-emphasis-color: #000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color: rgba(33, 37, 41, 0.75);
  --bs-secondary-color-rgb: 33, 37, 41;
  --bs-secondary-bg: #e9ecef;
  --bs-secondary-bg-rgb: 233, 236, 239;
  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
  --bs-tertiary-color-rgb: 33, 37, 41;
  --bs-tertiary-bg: #f8f9fa;
  --bs-tertiary-bg-rgb: 248, 249, 250;

  /* Bootstrap Links */
  --bs-heading-color: inherit;
  --bs-link-color: #0d6efd;
  --bs-link-color-rgb: 13, 110, 253;
  --bs-link-decoration: underline;
  --bs-link-hover-color: #0a58ca;
  --bs-link-hover-color-rgb: 10, 88, 202;

  /* Bootstrap Code & Highlight */
  --bs-code-color: #d63384;
  --bs-highlight-color: #212529;
  --bs-highlight-bg: #fff3cd;

  /* Bootstrap Borders */
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;

  /* Bootstrap Shadows */
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);

  /* Bootstrap Focus Ring */
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(13, 110, 253, 0.25);

  /* Bootstrap Form Validation */
  --bs-form-valid-color: #198754;
  --bs-form-valid-border-color: #198754;
  --bs-form-invalid-color: #dc3545;
  --bs-form-invalid-border-color: #dc3545;

  /* Bootstrap Gradient */
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}


/* ============================================================================
   HIGH CONTRAST MODE (Accessibility)
   ============================================================================ */

@media (prefers-contrast: high) {
  :root {
    --border-light: #000000;
    --border-medium: #000000;
    --text-secondary: #000000;
    --shadow-light: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.4);
    --shadow-strong: rgba(0, 0, 0, 0.5);
  }
}