/*
 * 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
       NOTE: --color-neutral is for COMPONENT STATUS (offline, unknown, disabled).
             --text-muted is for SECONDARY TEXT (labels, captions, metadata).
             They share the same gray value intentionally, but have distinct semantic roles.
             Use --color-neutral for status indicators, --text-muted for text. */
    --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;
    /* Bridge-instrument display face — stencil/console headings, readouts, lamp
       labels. Pages using it must load Chakra Petch (extra_css Google-Fonts link);
       --bridge-display is the global alias the bridge-instruments.css primitives
       and the .bridge-* page family reference. */
    --font-family-display: 'Chakra Petch', 'Mulish', system-ui, sans-serif;
    --bridge-display: var(--font-family-display);

    --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);
    /* Card elevation — tight contact shadow + soft diffuse ambient (the
       "floating card" look); used by .metric-card / .vessel-row / .card so
       surfaces read elevated instead of boxy-bordered (2026-06-08) */
    --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 20px -8px rgba(16, 24, 40, 0.10);
    --shadow-card-hover: 0 2px 4px rgba(16, 24, 40, 0.05), 0 14px 30px -8px rgba(16, 24, 40, 0.16);

    /* ============================================
       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;
    /* Secondary surface: tinted tiles/rows sitting ON a card (battery metric
       tiles, home system-status rows, Recent Incidents card). Referenced in
       7+ templates but was never defined — consumers with a fallback got a
       light hex even in dark mode, the rest rendered transparent. */
    --bg-secondary: #f1f5f9;
    --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; */

    /* ============================================
       HMI TOKENS
       Shipboard display (always dark regardless of theme)
       ============================================ */
    --hmi-bg-top: #0f1419;
    --hmi-bg-bottom: #1a2332;
    --hmi-navbar-top: #1e293b;
    --hmi-navbar-bottom: #0f172a;
    --hmi-panel: #1e293b;
    --hmi-border: #334155;
    --hmi-text: #e2e8f0;
    --hmi-text-muted: #94a3b8;
    --hmi-text-label: #cbd5e0;
    --hmi-accent: #60a5fa;
    /* Bridge-instrument vocabulary (2026-06-11): panel faces, corner screws,
       blueprint grid and annunciator lamp colors for the HMI console.
       Lamp colors are HMI-local because the canvas never theme-flips — the
       light-mode --color-* tokens are too dim for text on this dark face. */
    --hmi-face-top: #1d2738;
    --hmi-face-bottom: #141d2c;
    --hmi-well: rgba(8, 13, 22, 0.55);
    --hmi-screw: rgba(148, 163, 184, 0.28);
    --hmi-grid: rgba(96, 165, 250, 0.05);
    --hmi-lamp-ok: #4ade80;
    --hmi-lamp-warn: #fbbf24;
    --hmi-lamp-crit: #f87171;
    --hmi-lamp-info: #38bdf8;
    --hmi-lamp-battery: #c4b5fd;
    --hmi-lamp-hybrid: #22d3ee;
    --hmi-lamp-neutral: #94a3b8;
    --hmi-banner-danger-start: #7f1d1d;
    --hmi-banner-danger-end: #991b1b;
    --hmi-banner-danger-text: #fca5a5;

    /* ============================================
       LIVE MONITOR TOKENS
       Oscilloscope pop-up (live-monitor.css). Theme-invariant dark instrument
       face — like the HMI canvas, the scope never flips to light, so these are
       defined once here (SSOT) instead of as hardcoded hex in live-monitor.css.
       ============================================ */
    --live-bg: #1c1c34;        /* panel face */
    --live-bg-2: #18182e;      /* header + value bar */
    --live-bg-3: #16162c;      /* toolbar / compare / legend */
    --live-border: #444468;    /* panel + button borders */
    --live-border-2: #333358;  /* toolbar / legend borders */
    --live-text: #f0f0f8;      /* body text */
    --live-text-bright: #d8d8ec;
    --live-text-dim: #c0c0d8;  /* unit, button labels, legend */
    --live-text-muted: #b0b0cc;/* meta, data age */
    --live-text-faint: #9090aa;/* point count, stat labels */
    --live-text-hover: #e8e8f8;/* button hover label */
    --live-value: #ffffff;     /* big readout numeral */
    --live-up: #00ff88;        /* rising / live pulse / active window */
    --live-up-bg: #2a5040;     /* active window button fill */
    --live-down: #ff5577;      /* falling / stale */
    --live-flat: #7878a0;      /* unchanged */
    --live-ctrl-bg: #30304e;   /* header control buttons */
    --live-ctrl-border: #555578;
    --live-ctrl-text: #e0e0f0;
    --live-ctrl-hover: #484870;
    --live-btn-bg: #2a2a48;    /* window + action buttons */
    --live-btn-hover: #3a3a60;
    --live-row-hover: #383860; /* compare result hover */
    --live-input-bg: #242448;  /* compare input */
    --live-input-focus: #5599ff;
    --live-rec-bg: #5a2a2a;    /* active "record/annotate" action */
    --live-rec-text: #ff9977;
    --live-rec-border: #ff7755;
}

/* ============================================
   DARK MODE TOKENS
   ============================================ */
[data-theme="dark"] {
    /* Background colors */
    --bg-body: #1a1f2e;
    --bg-card: #252d3d;
    --bg-secondary: #323c4f;
    --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);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 20px -8px rgba(0, 0, 0, 0.55);
    --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.35), 0 14px 30px -8px rgba(0, 0, 0, 0.65);

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

    /* Mode colors for dark backgrounds — keep dark enough for white text (WCAG AA) */
    --color-mode-battery: #7c3aed;  /* Violet-600: contrast 6.4:1 with white ✓ */
    --color-mode-hybrid: #0891b2;   /* Cyan-600: same as light mode, works on dark bg */

    /* 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;

    /* Status color overrides for dark mode (light text on dark bg) */
    --color-success-bg: rgba(34, 197, 94, 0.15);
    --color-success-text: #86efac;
    --color-warning-bg: rgba(245, 158, 11, 0.15);
    --color-warning-text: #fcd34d;
    --color-danger-bg: rgba(239, 68, 68, 0.15);
    --color-danger-text: #fca5a5;
    --color-info-bg: rgba(59, 130, 246, 0.15);
    --color-info-text: #93c5fd;
    --color-neutral-bg: rgba(148, 163, 184, 0.15);
    --color-neutral-text: #cbd5e1;

    /* Mode color overrides */
    --color-mode-battery-bg: rgba(109, 40, 217, 0.2);
    --color-mode-battery-text: #c4b5fd;
    --color-mode-hybrid-bg: rgba(8, 145, 178, 0.2);
    --color-mode-hybrid-text: #67e8f9;

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