/*
 * Design Tokens - Single Source of Truth
 * BOS Power Digital Solutions Design System
 *
 * This file defines ALL design tokens (colors, spacing, typography, etc.)
 * Other CSS files should reference these variables, not define their own.
 *
 * USAGE: Include this file FIRST before other stylesheets.
 */

:root {
    /* ============================================
       BRAND COLORS
       BOS Power official brand palette
       ============================================ */
    --color-brand: #006CA5;
    --color-brand-dark: #005A8C;
    --color-brand-light: #4A9FD8;
    --color-brand-lighter: #0080C0;

    /* ============================================
       SEMANTIC COLORS
       Status indicators and feedback
       ============================================ */

    /* Success/OK - Green */
    --color-success: #2f855a;
    --color-success-dark: #38a169;
    --color-success-bg: #c6f6d5;
    --color-success-text: #22543d;

    /* Warning - Amber */
    --color-warning: #f59e0b;
    --color-warning-dark: #d97706;
    --color-warning-bg: #fef3c7;
    --color-warning-text: #78350f;

    /* Danger/Critical - Red */
    --color-danger: #c53030;
    --color-danger-dark: #dc2626;
    --color-danger-bg: #fecaca;
    --color-danger-text: #991b1b;

    /* Info/Ready - Blue */
    --color-info: #2c5282;
    --color-info-dark: #3182ce;
    --color-info-bg: #bee3f8;
    --color-info-text: #2c5282;

    /* Neutral/Offline - Gray */
    --color-neutral: #718096;
    --color-neutral-dark: #4a5568;
    --color-neutral-bg: #e2e8f0;
    --color-neutral-text: #4a5568;

    /* ============================================
       OPERATIONAL MODE COLORS
       PEMS power source indicators
       ============================================ */

    /* Shore Power - Green (same as success) */
    --color-mode-shore: var(--color-success);
    --color-mode-shore-bg: var(--color-success-bg);
    --color-mode-shore-text: var(--color-success-text);

    /* Battery - Purple/Violet (neutral, not warning-like) */
    --color-mode-battery: #6d28d9;  /* Darker violet for WCAG AA contrast compliance */
    --color-mode-battery-bg: #ede9fe;
    --color-mode-battery-text: #5b21b6;

    /* Genset - Blue (same as info) */
    --color-mode-genset: var(--color-info);
    --color-mode-genset-bg: var(--color-info-bg);
    --color-mode-genset-text: var(--color-info-text);

    /* Hybrid - Teal/Cyan */
    --color-mode-hybrid: #0891b2;
    --color-mode-hybrid-bg: #a5f3fc;
    --color-mode-hybrid-text: #155e75;

    /* Offline/Unknown - Gray (same as neutral) */
    --color-mode-offline: var(--color-neutral);
    --color-mode-offline-bg: var(--color-neutral-bg);
    --color-mode-offline-text: var(--color-neutral-text);

    /* ============================================
       TYPOGRAPHY
       ============================================ */
    --font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', monospace;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --font-size-2xs: 0.6875rem; /* 11px - detail text, subtitles */
    --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 */
    --font-size-metric: 1.375rem;    /* 22px - metric card values */
    --font-size-metric-lg: 1.75rem;  /* 28px - large metric values */

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;

    /* ============================================
       SPACING SCALE
       Based on 4px unit (0.25rem)
       ============================================ */
    --space-0: 0;
    --space-1: 0.25rem;   /* 4px */
    --space-1-half: 0.375rem; /* 6px - between 1 and 2 */
    --space-2: 0.5rem;    /* 8px */
    --space-2-half: 0.625rem; /* 10px - between 2 and 3 */
    --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 */

    /* Legacy aliases for backward compatibility */
    --space-xs: var(--space-1);
    --space-sm: var(--space-2);
    --space-md: var(--space-3);
    --space-lg: var(--space-4);
    --space-xl: var(--space-5);
    --space-2xl: var(--space-6);
    --space-3xl: var(--space-8);
    --space-4xl: var(--space-12);

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

    /* ============================================
       SHADOWS
       ============================================ */
    --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);

    /* ============================================
       TEXT COLORS
       ============================================ */
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --text-light: #a0aec0;
    --text-inverse: #ffffff;
    --text-heading: var(--color-brand);
    --text-accent: var(--color-brand-light);
    --text-link: #0d6efd;

    /* ============================================
       BACKGROUND COLORS
       ============================================ */
    --bg-body: #f8f9fa;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-hover: #f1f5f9;
    --bg-active: #e2e8f0;
    --bg-table-stripe: rgba(0, 0, 0, 0.02);

    /* ============================================
       BORDER COLORS
       ============================================ */
    --border-default: #e2e8f0;
    --border-color: var(--border-default);  /* Alias for compatibility */
    --border-light: #f1f5f9;
    --border-dark: #cbd5e0;

    /* ============================================
       SKELETON/LOADING COLORS
       ============================================ */
    --skeleton-from: #f0f0f0;
    --skeleton-to: #e0e0e0;
    --loading-overlay: rgba(255, 255, 255, 0.9);

    /* ============================================
       ALERT COLORS
       Bootstrap-style alert backgrounds
       ============================================ */
    --alert-info-bg: #cff4fc;
    --alert-info-border: #b6effb;
    --alert-info-text: #055160;
    --alert-warning-bg: #fff3cd;
    --alert-warning-border: #ffecb5;
    --alert-warning-text: #664d03;
    --alert-danger-bg: #f8d7da;
    --alert-danger-border: #f5c2c7;
    --alert-danger-text: #842029;
    --alert-success-bg: #d1e7dd;
    --alert-success-border: #badbcc;
    --alert-success-text: #0f5132;

    /* ============================================
       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;
    --z-toast: 1080;

    /* ============================================
       ANIMATION DURATIONS
       Standalone durations for custom animations
       ============================================ */
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
    --duration-slower: 500ms;

    /* ============================================
       TRANSITIONS
       Pre-composed duration + easing combinations
       ============================================ */
    --transition-fast: var(--duration-fast) ease;
    --transition-normal: var(--duration-normal) ease;
    --transition-slow: var(--duration-slow) ease;

    /* ============================================
       CHART THEME VARIABLES
       Consistent colors for data visualization
       ============================================ */
    --chart-line-primary: var(--color-brand);
    --chart-line-secondary: var(--color-info);
    --chart-line-tertiary: var(--color-success);
    --chart-line-quaternary: var(--color-warning);
    --chart-area-fill: rgba(0, 108, 165, 0.1);
    --chart-grid: var(--border-light);
    --chart-axis: var(--text-muted);
    --chart-label: var(--text-secondary);
    --chart-tooltip-bg: var(--bg-card);
    --chart-tooltip-border: var(--border-default);

    /* ============================================
       BREAKPOINTS (for reference - use in media queries)
       ============================================ */
    /* --breakpoint-sm: 576px; */
    /* --breakpoint-md: 768px; */
    /* --breakpoint-lg: 992px; */
    /* --breakpoint-xl: 1200px; */
    /* --breakpoint-xxl: 1400px; */
}

/* ============================================
   DARK MODE TOKENS
   ============================================ */
[data-theme="dark"] {
    /* Background colors */
    --bg-body: #1a1f2e;
    --bg-card: #252d3d;
    --bg-input: #2d3748;
    --bg-hover: #3d4a5c;
    --bg-active: #4a5568;
    --bg-table-stripe: rgba(255, 255, 255, 0.03);

    /* Text colors */
    --text-primary: #e8ecf2;
    --text-secondary: #c4cdd9;
    --text-muted: #9ca8b8;
    --text-light: #929aa8;  /* Increased from #6b7280 for 4.8:1 contrast on card bg */
    --text-heading: #5eb8ff;
    --text-accent: #7dd3fc;
    --text-link: #60a5fa;

    /* Border colors */
    --border-default: #3d4a5c;
    --border-color: var(--border-default);
    --border-light: #3d4a5c;  /* Increased from #2d3748 for 2.1:1 contrast */
    --border-dark: #4a5568;

    /* Skeleton/loading */
    --skeleton-from: #2d3748;
    --skeleton-to: #3d4a5c;
    --loading-overlay: rgba(26, 31, 46, 0.9);

    /* Shadows (darker in dark mode) */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);

    /* Brand colors (lighter for dark backgrounds) */
    --color-brand: #5eb8ff;
    --color-brand-dark: #7cc4ff;
    --color-brand-light: #93d0ff;

    /* Mode colors need slight adjustment for dark mode visibility */
    --color-mode-battery: #a78bfa;  /* Lighter violet for dark backgrounds */
    --color-mode-hybrid: #22d3ee;   /* Lighter cyan */

    /* Alert backgrounds for dark mode */
    --alert-info-bg: #1e3a5f;
    --alert-info-border: #2563eb;
    --alert-info-text: #93c5fd;
    --alert-warning-bg: #422006;
    --alert-warning-border: #d97706;
    --alert-warning-text: #fcd34d;
    --alert-danger-bg: #450a0a;
    --alert-danger-border: #dc2626;
    --alert-danger-text: #fca5a5;
    --alert-success-bg: #052e16;
    --alert-success-border: #16a34a;
    --alert-success-text: #86efac;

    /* Tooltip colors for dark mode */
    --tooltip-bg: #374151;
    --tooltip-text: #f3f4f6;

    /* Code block colors for dark mode */
    --code-bg: #1e293b;
    --code-text: #f472b6;
    --pre-bg: #1e293b;

    /* Link hover for dark mode */
    --text-link-hover: #93c5fd;

    /* Badge variants for dark mode */
    --badge-secondary-bg: #475569;
    --badge-light-bg: #334155;

    /* Active/selected state for dark mode */
    --color-active: #2563eb;

    /* Chart theme variables for dark mode */
    --chart-area-fill: rgba(94, 184, 255, 0.15);
    --chart-grid: var(--border-dark);
}