/* Jetons de design (design tokens) : toutes les couleurs, tailles, espacements et durées de l'app.
   Un seul endroit à modifier pour changer l'apparence. Direction validée avec Dylan le 27/09/2026 :
   sombre par défaut (navy profond, cartes plus claires), grands chiffres, mouvements courts.
   RÈGLE DES COULEURS (Dylan, 27/09/2026) : chaque couleur a une fonction.
   - violet (accent) : identité et interaction (boutons principaux, navigation, sélection, liens) ;
   - vert : positif uniquement (encaissé, hausse, soldée, objectif atteint) ;
   - rouge : négatif ou alerte (retard, baisse, rétractée, suppression) ;
   - ambre : attente ou prévision (prévu, en attente) ;
   - bleu : information, en cours ;
   - couleurs de repérage (bleu, pink, orange, teal, sky, sand, purple) : identifier une entreprise ou un produit. */
:root {
  color-scheme: dark;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Surfaces et texte, mode sombre */
  --bg: #0A0E17;
  --bg-2: #0E1421;            /* barre latérale, barre d'onglets */
  --card: #141B2D;            /* cartes */
  --card-2: #1B2439;          /* élément posé sur une carte */
  --line: rgba(148, 163, 196, 0.14);
  --line-strong: rgba(148, 163, 196, 0.3);
  --text: #F2F5FB;
  --text-2: #A9B4CC;          /* secondaire : contraste 7 sur les cartes */
  --text-3: #7C89A6;          /* légendes */
  --fill: rgba(148, 163, 196, 0.12);   /* boutons secondaires, champs */
  --fill-2: rgba(148, 163, 196, 0.2);
  --overlay: rgba(4, 8, 16, 0.62);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--line-strong);
  --hero-a: #3E2FB0; --hero-b: #2A45C8; --hero: linear-gradient(135deg, var(--hero-a) 0%, var(--hero-b) 100%);
  /* Couleurs posées SUR un dégradé (carte Commission, tuiles) : mêmes fonctions, versions claires lisibles sur fond coloré */
  --hero-green: #86F5C8; --hero-amber: #FFD27D; --hero-red: #FFAFAF;

  /* Accent (violet Cockpit) : --accent pour le texte et les icônes, --accent-bg pour les fonds pleins (texte blanc, contraste 4,6) */
  --accent: #A99BFF;
  --accent-bg: #6D5DF6;
  --accent-strong: #5B4BE8;
  --accent-soft: rgba(139, 124, 255, 0.16);
  --on-accent: #FFFFFF;

  /* Couleurs de repérage (statuts, entreprises, catégories). Chaque couleur a sa version « douce » pour les fonds. */
  --blue: #5B8CFF;   --blue-soft: rgba(91, 140, 255, 0.16);
  --green: #34D399;  --green-soft: rgba(52, 211, 153, 0.16);
  --amber: #F5B841;  --amber-soft: rgba(245, 184, 65, 0.16);
  --red: #FF6B6B;    --red-soft: rgba(255, 107, 107, 0.16);
  --purple: #C084FC; --purple-soft: rgba(192, 132, 252, 0.16);
  --orange: #FB923C; --orange-soft: rgba(251, 146, 60, 0.16);
  --teal: #2DD4BF;   --teal-soft: rgba(45, 212, 191, 0.16);
  --pink: #F472B6;   --pink-soft: rgba(244, 114, 182, 0.16);
  --sky: #38BDF8;    --sky-soft: rgba(56, 189, 248, 0.16);
  --sand: #D6A77A;   --sand-soft: rgba(214, 167, 122, 0.16);
  --slate: #94A3B8;  --slate-soft: rgba(148, 163, 184, 0.16);

  /* Rythme : grille de 4 / 8 pt */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --r-card: 16px; --r-btn: 12px; --r-input: 12px; --r-pill: 999px; --r-sheet: 20px;
  --gutter: 16px;
  --sidenav-w: 248px;
  --tabbar-h: 62px;                                            /* barre d'onglets flottante de l'iPhone */
  --tb-bottom: max(12px, calc(env(safe-area-inset-bottom) - 10px)); /* son écart avec le bas de l'écran */
  --control-h: 44px;

  /* Verre (Liquid Glass imité) : réservé à la couche de navigation qui flotte au-dessus du contenu */
  --glass: rgba(30, 38, 60, 0.5); --glass-solid: #1F283D;
  --glass-edge: rgba(255, 255, 255, 0.14); --glass-hi: rgba(255, 255, 255, 0.22); --glass-glow: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); --pill: rgba(255, 255, 255, 0.13);

  /* Mouvement : court, avec un léger rebond pour ce qui s'ouvre */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  /* Deux ressorts (D9) : posés au démarrage par ui/motion.js (courbes animées par la puce graphique), qui remplace ces valeurs de repli.
     Doux (pages, feuilles, environ 0,55 s) et vif avec un léger rebond (menus, pastille, boutons, environ 0,45 s). */
  --spring-soft: var(--ease); --spring-soft-d: 520ms;
  --spring-snappy: var(--ease-spring); --spring-snappy-d: 420ms;
}

@media (min-width: 900px) { :root { --gutter: 24px; } }
@media (min-width: 1400px) { :root { --gutter: 32px; } }

/* Mode clair : suit le système, sauf choix explicite (data-theme sur <html>, réglé dans Réglages). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #F4F6FB; --bg-2: #FFFFFF; --card: #FFFFFF; --card-2: #F1F4F9;
    --line: rgba(15, 23, 42, 0.08); --line-strong: rgba(15, 23, 42, 0.16);
    --text: #0B1220; --text-2: #4B5772; --text-3: #7A879F;
    --fill: rgba(15, 23, 42, 0.06); --fill-2: rgba(15, 23, 42, 0.11);
    --overlay: rgba(15, 23, 42, 0.4);
    --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
    --shadow-pop: 0 16px 48px rgba(15, 23, 42, 0.18), 0 0 0 1px var(--line);
    --hero-a: #5B4BE8; --hero-b: #3B6CF6; --hero: linear-gradient(135deg, var(--hero-a) 0%, var(--hero-b) 100%);
    --accent: #5B4BE8; --accent-bg: #5B4BE8; --accent-strong: #4A3BD4; --accent-soft: rgba(91, 75, 232, 0.12); --on-accent: #FFFFFF;
    --blue: #2F6BFF; --green: #12A66F; --amber: #C77F00; --red: #E5484D; --purple: #9B4DE0; --orange: #E8712A; --teal: #0E9F9F; --pink: #DB2777; --sky: #0284C7; --sand: #A8763E; --slate: #64748B;
    --glass: rgba(255, 255, 255, 0.58); --glass-solid: #FFFFFF; --glass-edge: rgba(255, 255, 255, 0.75); --glass-hi: rgba(255, 255, 255, 0.95);
    --glass-glow: rgba(255, 255, 255, 0.7); --glass-shadow: 0 8px 28px rgba(15, 23, 42, 0.16); --pill: rgba(15, 23, 42, 0.07);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F6FB; --bg-2: #FFFFFF; --card: #FFFFFF; --card-2: #F1F4F9;
  --line: rgba(15, 23, 42, 0.08); --line-strong: rgba(15, 23, 42, 0.16);
  --text: #0B1220; --text-2: #4B5772; --text-3: #7A879F;
  --fill: rgba(15, 23, 42, 0.06); --fill-2: rgba(15, 23, 42, 0.11);
  --overlay: rgba(15, 23, 42, 0.4);
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-pop: 0 16px 48px rgba(15, 23, 42, 0.18), 0 0 0 1px var(--line);
  --hero-a: #5B4BE8; --hero-b: #3B6CF6; --hero: linear-gradient(135deg, var(--hero-a) 0%, var(--hero-b) 100%);
  --accent: #5B4BE8; --accent-bg: #5B4BE8; --accent-strong: #4A3BD4; --accent-soft: rgba(91, 75, 232, 0.12); --on-accent: #FFFFFF;
  --blue: #2F6BFF; --green: #12A66F; --amber: #C77F00; --red: #E5484D; --purple: #9B4DE0; --orange: #E8712A; --teal: #0E9F9F; --pink: #DB2777; --sky: #0284C7; --sand: #A8763E; --slate: #64748B;
  --glass: rgba(255, 255, 255, 0.58); --glass-solid: #FFFFFF; --glass-edge: rgba(255, 255, 255, 0.75); --glass-hi: rgba(255, 255, 255, 0.95);
  --glass-glow: rgba(255, 255, 255, 0.7); --glass-shadow: 0 8px 28px rgba(15, 23, 42, 0.16); --pill: rgba(15, 23, 42, 0.07);
}