/*
 * NEWTOWT design tokens — charte "Nouvelle Étoile" (v1.0.0, 2026-04-07)
 * Source de vérité : docs/design/newtowt-design-tokens.json
 *
 * Ratio chromatique cible : 60% teal · 20% vert · 10% cuivre · 10% neutres
 */
:root {
  /* ────────────────────────────── Couleurs ──────────────────────────── */
  /* Teal — dominante (60%) — titres, structures, liens */
  --teal:        #0D5966;
  --teal-dark:   #093F48;
  --teal-light:  #1A7C8C;

  /* Vert — accent secondaire (20%) — baseline, success */
  --vert:        #87BD29;
  --vert-light:  #BEDB92;

  /* Bleu — usage logo strict */
  --bleu-marine: #0051A0;
  --bleu-horizon:#9EC6D2;

  /* Cuivre — transition (10%) — préfixe NEW, focus halo */
  --cuivre:      #B47148;
  --cuivre-light:#D49975;

  /* Sable — fond éditorial */
  --sable:       #EFE6D6;
  --sable-light: #F8F2E6;

  /* Neutres (10%) */
  --anthracite:  #2A2A2A;
  --gris:        #6E6E6E;
  --gris-clair:  #D9D9D9;
  --blanc:       #FFFFFF;
  --blanc-casse: #FAF7F2;
  --nuit:        #0B2A33;

  /* Sémantique */
  --success:     var(--vert);
  --warning:     var(--cuivre);
  --danger:      #C44536;
  --info:        var(--bleu-horizon);

  /* ────────────────────────── Aliases applicatifs ───────────────────── */
  /* Surfaces (light-first) */
  --bg-0: var(--blanc-casse);   /* canvas */
  --bg-1: var(--blanc);         /* cards */
  --bg-2: var(--sable-light);   /* hover */
  --bg-3: var(--gris-clair);    /* borders */

  /* Texte */
  --text-0: var(--anthracite);  /* primaire */
  --text-1: var(--teal);        /* labels, headings */
  --text-2: var(--gris);        /* secondaire */

  /* Actions / sémantique */
  --accent:      var(--cuivre);        /* action transition */
  --accent-alt:  var(--teal-light);    /* focus rings */
  --primary:     var(--teal);          /* CTA principal */
  --primary-hover:var(--teal-light);
  --secondary:   var(--vert);          /* CTA validation/eco */
  --secondary-hover:var(--vert-light);
  --warn:        var(--warning);
  --error:       var(--danger);
  --ok:          var(--success);

  /* Status leg */
  --status-planned:    var(--bleu-horizon);
  --status-inprogress: var(--cuivre);
  --status-completed:  var(--vert);
  --status-cancelled:  var(--gris);

  /* Direction cargo */
  --cargo-import: var(--bleu-horizon);
  --cargo-export: var(--cuivre);

  /* Gradients (subtils — charte minimaliste) */
  --gradient-hero: linear-gradient(135deg, var(--sable-light) 0%, var(--blanc) 100%);
  --gradient-night: linear-gradient(180deg, var(--nuit) 0%, var(--teal-dark) 100%);

  /* ───────────────────────── Typographie ───────────────────────────── */
  --font-titre: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-corps: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-mono:  "JetBrains Mono", "SF Mono", Consolas, "Courier New", monospace;

  /* Aliases legacy (compat templates V3) */
  --font-display: var(--font-titre);
  --font-body:    var(--font-corps);
  --font-accent:  var(--font-serif);

  --text-xs:   0.75rem;   /* 12 — légendes */
  --text-sm:   0.875rem;  /* 14 — interfaces compactes */
  --text-base: 1rem;      /* 16 — corps */
  --text-md:   1.125rem;  /* 18 — sous-titres */
  --text-lg:   1.5rem;    /* 24 — h3 */
  --text-xl:   2rem;      /* 32 — h2 */
  --text-2xl:  2.75rem;   /* 44 — h1 */
  --text-3xl:  clamp(3rem, 7vw, 5rem);  /* hero responsif 48-80px */
  --text-4xl:  var(--text-3xl);          /* alias legacy */

  /* Graisses */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Hauteurs de ligne */
  --lh-tight:   1.15;
  --lh-snug:    1.35;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  /* Letter spacing */
  --ls-tight:  -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-wider:  0.12em;   /* kickers MAJUSCULES */
  --ls-widest: 0.18em;   /* baselines */

  /* ────────────────────────── Espacement ───────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ─────────────────────────── Layout ──────────────────────────────── */
  --max-width: 1240px;
  --pad-x: clamp(1.25rem, 5vw, 3.75rem);  /* 20-60px responsive */

  --bp-xs: 480px;
  --bp-sm: 768px;
  --bp-md: 1024px;
  --bp-lg: 1240px;

  /* ────────────────────────── Border radius ────────────────────────── */
  /* Charte minimaliste : très subtil, jamais arrondi */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 8px;        /* alias legacy */
  --radius-pill: 999px;

  /* ────────────────────────── Élévations ───────────────────────────── */
  /* Ombres en 2 couches (signature refonte "Nouvelle Étoile") — alignées
     sur colors_and_type.css (--sh-hair / --sh-card / --sh-lift). */
  --shadow-sm: 0 1px 0 rgba(13, 89, 102, 0.08);
  --shadow-md: 0 2px 4px rgba(13, 89, 102, 0.06), 0 12px 28px -16px rgba(13, 89, 102, 0.18);
  --shadow-lg: 0 4px 8px rgba(13, 89, 102, 0.08), 0 24px 48px -20px rgba(13, 89, 102, 0.24);
  --shadow-glow: 0 0 0 3px rgba(180, 113, 72, 0.35);  /* halo cuivre focus */

  /* ────────────────────────── Animations ───────────────────────────── */
  --duration-fast: 200ms;
  --duration-medium: 200ms;
  --duration-slow: 400ms;
  --easing-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ────────────────────────── Logo ratios ──────────────────────────── */
  --logo-ratio: 4.33;        /* 1450/335 */
  --logo-min-height: 44px;   /* web */
}

/* Dark mode — fonds premium nuit + teal-dark */
[data-theme="dark"] {
  --bg-0: var(--nuit);
  --bg-1: var(--teal-dark);
  --bg-2: var(--teal);
  --bg-3: var(--teal-light);
  --text-0: var(--blanc-casse);
  --text-1: var(--bleu-horizon);
  --text-2: var(--gris-clair);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * Passerelle NT2 — back-office (ADR-017, docs/design/06-charte-backoffice-
 * passerelle-nt2.md §3, §11). Portée : `html[data-app="staff"]`, posé par
 * `staff/_layout.html` et les pages d'authentification staff. La vitrine et
 * l'extranet client ne portent pas l'attribut et gardent la charte « Nouvelle
 * Étoile » ci-dessus, intacte (étape 5).
 *
 * Deux jeux de valeurs (clair par défaut, sombre composé — jamais une
 * inversion), tous deux mesurés WCAG AA par `scripts/check_contrast.py`.
 * Le sombre s'applique soit par choix de l'utilisateur (`data-theme="dark"`,
 * posé au rendu depuis `users.theme`), soit par `prefers-color-scheme` quand
 * l'utilisateur n'a rien choisi (`:not([data-theme="light"])`). Les deux blocs
 * sombres DOIVENT rester identiques : une sentinelle le vérifie.
 *
 * Pivot des alias legacy (§11.2) : `kairos.css` lit `--teal`, `--sable-light`,
 * `--gris-clair`… Sous le staff ces noms sont REDIRIGÉS vers les tokens NT2
 * (`--teal` → `--action`, `--sable-light` → `--bg-0`, `--vert` → `--success`).
 * Un composant legacy non encore réécrit reçoit ainsi des surfaces et des
 * textes cohérents dans les deux thèmes ; chaque bloc de déploiement remplace
 * ensuite ses classes par celles de `nt2.css`. Aucun littéral de couleur
 * n'existe ailleurs que dans ce fichier (sentinelle `test_nt2_no_color_literals`).
 * ═══════════════════════════════════════════════════════════════════════ */
html[data-app="staff"] {
  color-scheme: light;

  /* ── Surfaces et filets ── */
  --bg-0: #F3F5F6;             /* fond de page */
  --bg-1: #FFFFFF;             /* cartes, panneaux, sidebar, topbar, champs */
  --bg-2: #E9EDEF;             /* survol, zébrage, fond secondaire */
  --bg-3: #D6DDE0;             /* filets (alias --border) */
  --border: var(--bg-3);
  --border-strong: #B6C1C6;
  --border-input: #7F8E96;     /* 3,38:1 sur --bg-1 — les champs vivent sur --bg-1 */

  /* ── Texte ── */
  --text-0: #16232A;
  --text-1: #4B5B62;
  /* #5B6B74 jusqu'au 2026-09-22 : conforme sur --bg-0/1/2, mais 4,34:1 sur
     --danger-soft, 4,43 sur --action-soft et 4,46 sur --quai-soft — sous les
     4,5:1 de l'objectif §1.4. Or c'est là que ce jeton atterrit : les classes
     utilitaires (.text-muted, .card-meta, .cell-sub, .kv dt) vivent dans les
     badges, les alertes et les encadrés éditoriaux. −6 par canal (même axe
     bleu-gris, écarts R-G-B inchangés) porte le pire couple à 4,75:1. Le strict
     minimum était #586871 (4,54) : trois millièmes de marge, moins d'un pas
     sRGB — le défaut serait revenu au premier ajustement d'une surface pâle. */
  --text-2: #55656E;

  /* ── Action (teal en accent, 10-15 % de la surface) ── */
  --action: #0D5966;
  --action-ink: #FFFFFF;
  --action-hover: #0B4B56;
  --action-soft: #D9E9EC;
  --focus: #1A7C8C;

  /* ── Sémantique texte-sûre, dérivée de la marque ── */
  --success: #3F6E0E;      --success-soft: #E3F0D2;
  --warning: #8A5432;      --warning-soft: #F5E6DA;
  --danger: #B03A2D;       --danger-soft: #F9DEDA;
  --danger-fill: #B03A2D;  --danger-ink: #FFFFFF;
  /* Survol du bouton plein destructeur. Il manquait : `.btn-danger:hover`
     basculait sur --danger, qui vaut ici EXACTEMENT --danger-fill (aucun survol
     visible en clair) et, en sombre, le saumon clair #F08B7A sous une encre
     blanche — 2,42:1, un « Supprimer » illisible au survol. Même rapport
     d'assombrissement que --action → --action-hover (×0,845) ; encre blanche à
     7,65:1. Valeur indépendante du thème, comme --danger-fill. */
  --danger-fill-hover: #953126;
  --info: #2F6F86;         --info-soft: #DDEBF1;
  --neutral-soft: var(--bg-2);
  --quai: #6B4A2E;         --quai-soft: #EFE6D6;   /* sable : puce « à quai », encadré éditorial */

  /* ── Marque (décoratif, jamais seul porteur d'information) ── */
  --brand-teal: #0D5966;
  --brand-vert: #87BD29;
  --brand-cuivre: #B47148;
  --brand-sable: #EFE6D6;
  /* Le glyphe du rail (« NT », 11 px) est du TEXTE : `--brand-cuivre` ne vaut
     que 3,42:1 sur `--bg-1` — sous les 4,5:1 de la charte (§8). On garde le
     cuivre comme intention et on prend sa déclinaison texte-sûre (5,6:1).
     Le sombre est déjà conforme et reste inchangé (§3.1.4). */
  --logo-new: var(--warning);
  --logo-towt: var(--brand-teal);

  /* ── Palette navires v1 (validée daltonisme, §7.1) ── */
  --vessel-1: #0790A8; --vessel-2: #C0692F; --vessel-3: #8F4FB8;
  --vessel-4: #7A8F1A; --vessel-5: #3B6FD4; --vessel-6: #C7457E;

  /* ── Catégorie de traversée (export / import / hors Europe / intra-Europe) ──
     Quatre jetons PROPRES, et non les alias de marque `--bleu-marine`,
     `--cuivre`, `--gris`, `--vert` de l'ancienne règle : sous la couche staff
     `--bleu-marine` et `--teal` retombent tous deux sur `--action` (l'export et
     le repli auraient donc la même couleur), et `--cuivre`/`--vert` y valent
     `--warning`/`--success` — surcharger un ton sémantique d'un sens qui n'en
     est pas un.
     Calibrage : l'aplat vit sur la voie du Gantt (`--bg-0`), donc >= 3:1 (§8,
     composant). Les quatre sont ÉTAGÉS en luminance (9,5 / 6,4 / 4,6 / 3,4 sur
     `--bg-0`) et non seulement en teinte : deux barres voisines restent
     distinctes à l'impression, en noir et blanc et sous simulation deutéranope
     (pire couple 1,26:1 en teinte seule, 1,31 avec l'étagement). La couleur ne
     porte jamais seule : la légende la nomme, l'infobulle aussi, et le libellé
     de la barre dit `leg_code POL→POD`. */
  --trade-export: #144269;
  --trade-import: #8D4613;
  --trade-hors-europe: #627178;
  --trade-intra-eu: #619122;

  /* ── Élévation, plans, voiles ── */
  --overlay: rgba(22, 35, 42, 0.35);
  --shadow-float: 0 8px 24px -12px rgba(22, 35, 42, 0.28);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: var(--shadow-float);
  --shadow-glow: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--focus);
  --focus-danger: rgba(176, 58, 45, 0.35);
  --focus-success: rgba(63, 110, 14, 0.35);
  --focus-warning: rgba(138, 84, 50, 0.35);
  --opacity-disabled: 0.55;
  --z-sticky: 10; --z-sidebar: 20; --z-topbar: 30; --z-drawer: 40;
  --z-modal: 50; --z-toast: 60; --z-tooltip: 70;

  /* ── Typographie : une famille, trois graisses, huit tailles ── */
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, "Courier New", monospace;
  --font-titre: var(--font-ui);
  --font-corps: var(--font-ui);
  --font-serif: var(--font-ui);      /* DM Serif quitte le back-office */
  --font-display: var(--font-ui);
  --font-body: var(--font-ui);
  --font-accent: var(--font-ui);
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px;
  --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px;
  /* L'échelle legacy (rem) est ramenée sur l'échelle calme : les 32 et 44 px
     de la marque ne sont pas repris (Q3.5 « indicateurs trop gros »). */
  --text-xs: var(--fs-xs);   --text-sm: var(--fs-sm);   --text-base: var(--fs-base);
  --text-md: var(--fs-md);   --text-lg: var(--fs-lg);   --text-xl: var(--fs-xl);
  --text-2xl: var(--fs-2xl); --text-3xl: var(--fs-2xl); --text-4xl: var(--fs-2xl);
  --fw-light: 400; --fw-bold: 600; --fw-extrabold: 600;
  --lh-tight: 1.25; --lh-snug: 1.35; --lh-normal: 1.5; --lh-relaxed: 1.6;
  --ls-wider: 0.06em; --ls-widest: 0.06em;

  /* ── Géométrie ── */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 10px;
  --sidebar-w: 248px; --rail-w: 60px; --topbar-h: 52px;
  --row-h: 40px; --row-h-compact: 32px; --form-max: 640px; --drawer-w: 480px;
  --motion-fast: 150ms; --motion-base: 200ms; --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: var(--motion-fast);
  --duration-medium: var(--motion-base);
  --duration-slow: var(--motion-base);
  --easing-out: var(--ease);

  /* ── Pivot des alias applicatifs legacy ── */
  --primary: var(--action);          --primary-hover: var(--action-hover);
  --secondary: var(--success);       --secondary-hover: var(--success);
  --accent: var(--warning);          --accent-alt: var(--focus);
  --warn: var(--warning); --error: var(--danger); --ok: var(--success);
  --status-planned: var(--text-2);   --status-inprogress: var(--info);
  --status-completed: var(--success); --status-cancelled: var(--danger);
  --cargo-import: var(--info);       --cargo-export: var(--warning);
  --gradient-hero: none;             --gradient-night: none;

  /* ── Pivot des couleurs de marque lues comme chrome par kairos.css ── */
  --teal: var(--action);       --teal-dark: var(--action-hover); --teal-light: var(--focus);
  --vert: var(--success);      --vert-light: var(--success-soft);
  --cuivre: var(--warning);    --cuivre-light: var(--brand-cuivre);
  --bleu-horizon: var(--info); --bleu-marine: var(--action);
  --sable: var(--bg-2);        --sable-light: var(--bg-0);
  --anthracite: var(--text-0); --gris: var(--text-2); --gris-clair: var(--border);
  --blanc: var(--bg-1);        --blanc-casse: var(--bg-0); --nuit: var(--bg-0);
}

/* Thème sombre — choisi par l'utilisateur. */
html[data-app="staff"][data-theme="dark"] {
  color-scheme: dark;
  --bg-0: #0F1519; --bg-1: #161D22; --bg-2: #1E272D; --bg-3: #2A353C;
  --border-strong: #3B4851; --border-input: #5C6C76;
  /* --text-2 : #8A989F jusqu'au 2026-09-22 — 4,11:1 sur --action-soft et 4,29 sur --quai-soft (objectif §1.4 : 4,5). +12 par canal, pire couple 4,76:1. */
  --text-0: #E7ECEE; --text-1: #B3BFC5; --text-2: #96A4AB;
  --action: #3FB2C4; --action-ink: #0B1A1E; --action-hover: #4FBFD0; --action-soft: #173A42; --focus: #4FBFD0;
  --success: #87BD29; --success-soft: #1E3320;
  --warning: #D49975; --warning-soft: #3A2A20;
  --danger: #F08B7A;  --danger-soft: #3F1F1C; --danger-fill: #B03A2D; --danger-ink: #FFFFFF; --danger-fill-hover: #953126;
  --info: #9EC6D2;    --info-soft: #1B303A;
  --quai: #E8D6BC;    --quai-soft: #3A3128;
  --logo-new: #D49975; --logo-towt: #9EC6D2;
  --vessel-1: #1A98AE; --vessel-2: #CC7A47; --vessel-3: #A366CC;
  --vessel-4: #829530; --vessel-5: #6685E3; --vessel-6: #D6638E;
  --trade-export: #3789BF; --trade-import: #D7833A;
  --trade-hors-europe: #9DABB2; --trade-intra-eu: #98CB33;
  --overlay: rgba(0, 0, 0, 0.55);
  --shadow-float: 0 8px 24px -12px rgba(0, 0, 0, 0.55);
  --focus-danger: rgba(240, 139, 122, 0.5);
  --focus-success: rgba(135, 189, 41, 0.5);
  --focus-warning: rgba(212, 153, 117, 0.5);
}

/* Thème sombre — préférence du système, tant que l'utilisateur n'a rien
   choisi. Contenu IDENTIQUE au bloc précédent (sentinelle). */
@media (prefers-color-scheme: dark) {
  html[data-app="staff"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-0: #0F1519; --bg-1: #161D22; --bg-2: #1E272D; --bg-3: #2A353C;
    --border-strong: #3B4851; --border-input: #5C6C76;
    /* --text-2 : #8A989F jusqu'au 2026-09-22 — 4,11:1 sur --action-soft et 4,29 sur --quai-soft (objectif §1.4 : 4,5). +12 par canal, pire couple 4,76:1. */
    --text-0: #E7ECEE; --text-1: #B3BFC5; --text-2: #96A4AB;
    --action: #3FB2C4; --action-ink: #0B1A1E; --action-hover: #4FBFD0; --action-soft: #173A42; --focus: #4FBFD0;
    --success: #87BD29; --success-soft: #1E3320;
    --warning: #D49975; --warning-soft: #3A2A20;
    --danger: #F08B7A;  --danger-soft: #3F1F1C; --danger-fill: #B03A2D; --danger-ink: #FFFFFF; --danger-fill-hover: #953126;
    --info: #9EC6D2;    --info-soft: #1B303A;
    --quai: #E8D6BC;    --quai-soft: #3A3128;
    --logo-new: #D49975; --logo-towt: #9EC6D2;
    --vessel-1: #1A98AE; --vessel-2: #CC7A47; --vessel-3: #A366CC;
    --vessel-4: #829530; --vessel-5: #6685E3; --vessel-6: #D6638E;
    --trade-export: #3789BF; --trade-import: #D7833A;
    --trade-hors-europe: #9DABB2; --trade-intra-eu: #98CB33;
    --overlay: rgba(0, 0, 0, 0.55);
    --shadow-float: 0 8px 24px -12px rgba(0, 0, 0, 0.55);
    --focus-danger: rgba(240, 139, 122, 0.5);
    --focus-success: rgba(135, 189, 41, 0.5);
    --focus-warning: rgba(212, 153, 117, 0.5);
  }
}

/* Densité compacte (bascule `density.js`, §3.3) : lignes 32 px. */
html[data-app="staff"] body.density-compact { --row-h: var(--row-h-compact); }

/* Taille de texte augmentée (bascule `textsize.js`, §3.2.3) : toute l'échelle
   monte d'un cran (14 → 16 px de corps) et la ligne de tableau suit, pour que
   le texte grandisse sans se tasser. Même nature de préférence que la densité —
   PAR NAVIGATEUR (localStorage `towt-text-size`), pas persistée en base.
   Demandée en revue le 2026-09-21 : « rajoute une taille de police
   supplémentaire ». La géométrie de la coquille (sidebar 248 px, topbar 52 px)
   ne bouge pas : c'est nt2.css qui absorbe le cran dans le chrome. */
html[data-app="staff"] body.text-large {
  --fs-2xs: 12px; --fs-xs: 13px; --fs-sm: 14px; --fs-base: 16px;
  --fs-md: 18px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 30px;
  --text-xs: var(--fs-xs);   --text-sm: var(--fs-sm);   --text-base: var(--fs-base);
  --text-md: var(--fs-md);   --text-lg: var(--fs-lg);   --text-xl: var(--fs-xl);
  --text-2xl: var(--fs-2xl); --text-3xl: var(--fs-2xl); --text-4xl: var(--fs-2xl);
  --row-h: 44px; --row-h-compact: 36px;
}
html[data-app="staff"] body.text-large.density-compact { --row-h: var(--row-h-compact); }