/*
 * Fleet design tokens - mirrored from the Apollo kiosk (css/main.css :root) so the
 * Fleet dashboard and the on-device Apollo UI share one visual language.
 * Single source of truth: every Fleet stylesheet consumes these variables.
 * Legacy aliases at the bottom keep older rules working during migration.
 */

:root {
    /* Brand palette */
    --primary: #a74e9e;
    --primary-light: #bb6db3;
    --primary-dark: #933c85;
    /* Comma-separated RGB for rgba(var(--primary-rgb), a) — must track --primary */
    --primary-rgb: 167, 78, 158;
    --primary-dark-rgb: 147, 60, 133;

    /* Backgrounds (darkest -> most elevated) */
    --bg: #0a0a0f;
    --bg-panel: #16161b;
    --bg-surface: #1e1e24;
    --bg-elevated: #26262e;

    /* Translucent panel fill used for bars/sidebars over --bg */
    --panel-translucent: rgba(22, 22, 27, 0.95);

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: #a0a0a8;
    --text-muted-rgba: rgba(255, 255, 255, 0.5);
    --text-disabled: #555560;

    /* Functional */
    --color-success: #22c55e;
    --color-error: #ef4444;
    --color-warning: #f59e0b;
    --color-info: #3b82f6;

    /* Borders */
    --border: rgba(255, 255, 255, 0.08);
    --border-light: rgba(255, 255, 255, 0.15);

    /* Surface gradients (Apollo panel + tile look) */
    --grad-panel: linear-gradient(180deg, rgba(38, 38, 42, 0.98) 0%, rgba(28, 28, 32, 0.98) 100%);
    --grad-card: linear-gradient(145deg, rgba(55, 55, 60, 0.9) 0%, rgba(40, 40, 45, 0.9) 100%);
    --grad-primary: linear-gradient(135deg, #3a2d40 0%, #2e2336 55%, #241c2d 100%);
    --grad-primary-hover: linear-gradient(135deg, #4a3852 0%, #3a2d40 55%, #2e2336 100%);
    --grad-pill-active: linear-gradient(135deg, #7a4275 0%, #663860 55%, #552e50 100%);
    --grad-danger: linear-gradient(135deg, #a83a3a 0%, #8c2e2e 55%, #752525 100%);

    /* Responsive type scale */
    --base-font-size: clamp(12px, 1.2vw, 16px);
    --small-font-size: clamp(10px, 1.0vw, 14px);
    --large-font-size: clamp(14px, 1.4vw, 18px);
    --font-sans: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Consolas', monospace;

    /* Responsive spacing */
    --space-sm: clamp(8px, 0.8vw, 12px);
    --space-md: clamp(12px, 1.2vw, 16px);
    --space-lg: clamp(16px, 1.6vw, 24px);

    /* Radius scale */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 20px;

    /* Elevation */
    --shadow-panel: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --shadow-card-hover: 0 8px 32px rgba(var(--primary-rgb), 0.2);
    --shadow-btn-hover: 0 4px 12px rgba(var(--primary-rgb), 0.2);
    --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5);

    /* Motion */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --control-height: clamp(40px, 4.0vw, 48px);

    /* Z-index scale */
    --z-sticky: 200;
    --z-overlay: 1000;
    --z-modal: 3000;
    --z-toast: 12000;
    --z-loading: 9999;

    /* Layout */
    --sidebar-width: 280px;

    /* --- Legacy aliases (existing Fleet rules reference these) --- */
    --primary-color: var(--primary);
    --secondary-color: var(--primary-dark);
    --bg-color: var(--bg);
    --panel-bg: var(--panel-translucent);
    --panel-bg-solid: var(--bg-panel);
    --border-color: var(--border);
    --text-color: #e6e6e6;
    --text-muted: var(--text-muted-rgba);
    --success-color: var(--color-success);
    --warning-color: var(--color-warning);
    --danger-color: var(--color-error);
}

/*
 * Org skins. Default (:root above) is the standard Rapid Fusion purple = Industrial.
 * Military orgs get a green skin via data-skin="military" on documentElement.
 */
:root[data-skin="military"] {
    --primary: #2e7d32;
    --primary-light: #43a047;
    --primary-dark: #1b5e20;
    --primary-rgb: 46, 125, 50;
    --primary-dark-rgb: 27, 94, 32;

    --grad-primary: linear-gradient(135deg, #1f3a23 0%, #1a3020 55%, #15281a 100%);
    --grad-primary-hover: linear-gradient(135deg, #2a5230 0%, #1f3a23 55%, #1a3020 100%);
    --grad-pill-active: linear-gradient(135deg, #2e7d32 0%, #1b5e20 55%, #144d18 100%);
    --shadow-card-hover: 0 8px 32px rgba(var(--primary-rgb), 0.22);
    --shadow-btn-hover: 0 4px 12px rgba(var(--primary-rgb), 0.22);

    --primary-color: var(--primary);
    --secondary-color: var(--primary-dark);
}