/* ============================================================
   APSI — Système de variables (thème maritime industriel)
   ============================================================ */

:root {
    /* Palette principale — bleu marin profond / acier */
    --c-primary: #0E3D5C;
    --c-primary-light: #1B5A85;
    --c-primary-dark: #082338;
    --c-accent: #00A6A6;          /* teal — accent maritime */
    --c-accent-light: #2DC4C4;
    --c-accent-dark: #006A6A;

    /* États / signaux */
    --c-good: #16A34A;
    --c-good-bg: #DCFCE7;
    --c-fair: #F59E0B;
    --c-fair-bg: #FEF3C7;
    --c-poor: #EA580C;
    --c-poor-bg: #FFEDD5;
    --c-critical: #DC2626;
    --c-critical-bg: #FEE2E2;
    --c-muted: #94A3B8;
    --c-info: #2563EB;
    --c-info-bg: #DBEAFE;

    /* Surface — clair */
    --bg-base: #F1F5F9;
    --bg-surface: #FFFFFF;
    --bg-surface-alt: #F8FAFC;
    --bg-sidebar: #0A2540;
    --bg-sidebar-hover: #143D63;
    --bg-topbar: #FFFFFF;
    --bg-hover: #F1F5F9;

    /* Texte */
    --txt-strong: #0F172A;
    --txt-base: #334155;
    --txt-muted: #64748B;
    --txt-faint: #94A3B8;
    --txt-on-dark: #F8FAFC;
    --txt-on-dark-muted: #94A8C2;

    /* Bordures */
    --border-base: #E2E8F0;
    --border-strong: #CBD5E1;
    --border-faint: #F1F5F9;

    /* Effets */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
    --shadow-glow: 0 0 0 3px rgba(14, 61, 92, 0.12);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ============================================================
       SPACING SCALE — single source of truth for paddings/margins.
       Use these tokens (--space-N) rather than ad-hoc rem values so
       rhythm stays consistent across cards, forms, sticky bars, etc.
       Pixel scale is roughly 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64.
       ============================================================ */
    --space-1: 0.25rem;   /* 4 px  — tight gaps */
    --space-2: 0.5rem;    /* 8 px  — control gaps */
    --space-3: 0.75rem;   /* 12 px — small inner padding */
    --space-4: 1rem;      /* 16 px — default cell/card padding */
    --space-5: 1.25rem;   /* 20 px — card body */
    --space-6: 1.5rem;    /* 24 px — section separator */
    --space-8: 2rem;      /* 32 px — page-level gutter */
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* Canonical card padding — apply to .card and any opt-in card variant. */
    --card-padding: var(--space-5);
    --card-padding-compact: var(--space-3);

    /* ============================================================
       Z-INDEX HIERARCHY — single coherent stack so dropdowns clear
       sticky headers, toasts clear modals, etc. Layers go from
       bottom (in-flow accents) up to top (system toasts).
       ============================================================ */
    --z-base: 0;
    --z-sticky: 5;        /* topbar */
    --z-sidebar: 10;
    --z-sticky-thead: 20;
    --z-sticky-bar: 40;   /* form sticky action bar */
    --z-modal-backdrop: 900;
    --z-modal: 910;
    --z-dropdown: 1100;   /* tom select, term-suggest, table-prefs */
    --z-popover: 1200;    /* sidebar tooltip when collapsed */
    --z-tooltip: 1300;
    --z-toast: 1400;

    /* ============================================================
       RESPONSIVE BREAKPOINTS — kept as comments because CSS @media
       does not accept var() in the condition. Reference them by
       name when editing media queries so the codebase stays aligned.

       --bp-xs: 480px   (single-column phones)
       --bp-sm: 720px   (small tablets)
       --bp-md: 960px   (sidebar collapse threshold)
       --bp-lg: 1200px  (kpi-grid narrows)
       --bp-xl: 1440px
       ============================================================ */

    /* Sidebar */
    --sidebar-w: 260px;
    --topbar-h: 60px;

    /* Typo */
    --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
}

/* ----------------- Thème sombre ----------------- */
[data-theme="dark"] {
    --bg-base: #0B1828;
    --bg-surface: #102338;
    --bg-surface-alt: #0A1B2D;
    --bg-sidebar: #061525;
    --bg-sidebar-hover: #0E2A47;
    --bg-topbar: #0F2236;
    --bg-hover: #14304D;

    --txt-strong: #F1F5F9;
    --txt-base: #CBD5E1;
    --txt-muted: #94A8C2;
    --txt-faint: #6E839E;

    --border-base: #1F3A57;
    --border-strong: #2C4A6B;
    --border-faint: #16293E;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);

    --c-good-bg: rgba(22, 163, 74, 0.18);
    --c-fair-bg: rgba(245, 158, 11, 0.18);
    --c-poor-bg: rgba(234, 88, 12, 0.18);
    --c-critical-bg: rgba(220, 38, 38, 0.18);
    --c-info-bg: rgba(37, 99, 235, 0.18);
}