/* =====================================================================
   Suivi des RAO : jetons de design (lot 1)
   Source : plan/ihm/maquettes/_tokens.css (bloc 1 uniquement) ; DD § 2.1 à 2.4.
   Noms de jetons identiques à la maquette. Aucune règle de composant.
   Police : pas de @font-face ; pile système uniquement.
   Mode sombre défini mais NON actif : il faut data-theme="dark" (ou "auto"
   pour suivre le système) sur <html>. L'app ne pose aucun de ces attributs.
   ===================================================================== */

@layer tokens, base, components, utilities;

@layer tokens {
  :root {
    color-scheme: light;

    /* --- Gris : une seule famille, 10 paliers. Même rôle en clair et en sombre. */
    --gray-1:  #F7F8FA;  /* fond subtil : barre latérale, en-tête de table, survol */
    --gray-2:  #F0F2F5;  /* fond atténué : badge neutre, élément pressé */
    --gray-3:  #E4E7EC;  /* fond actif, squelette */
    --gray-4:  #D2D7DF;  /* bordure décorative (séparateurs, cartes) */
    --gray-5:  #B4BCC8;  /* bordure appuyée (boutons secondaires, chips) */
    --gray-6:  #7F8A9B;  /* bordure de contrôle (≥ 3:1), texte désactivé */
    --gray-7:  #606B7C;  /* texte tertiaire, placeholder */
    --gray-8:  #4B5565;  /* texte secondaire */
    --gray-9:  #2F3846;  /* texte appuyé, survol de texte */
    --gray-10: #161C26;  /* texte principal */
    --white:   #FFFFFF;

    /* --- Marque CELAD (continuité : bleu nuit #003366 de l'app actuelle) */
    --brand-navy: #003366;
    --brand-ink: var(--brand-navy);          /* couleur du logo (SVG en currentColor) */

    /* --- Accent unique : bleu CELAD */
    --accent-solid:       #003366;           /* bouton primaire, case cochée */
    --accent-solid-hover: #0A4A8C;
    --accent-text:        #0B5CAD;           /* lien, texte accent, anneau de focus */
    --accent-bg:          #E8F0FA;           /* navigation active, ligne sélectionnée */
    --accent-border:      #9DBCE3;           /* bordure décorative accent */
    --on-accent:          #FFFFFF;

    /* --- Sémantiques : texte (≥ 4,5:1 sur fond et sur blanc), fond, pastille (≥ 3:1) */
    --success-text: #13693A;  --success-bg: #E6F4EC;  --success-border: #A6D8B8;  --success-solid: #1E8A4C;
    --warning-text: #8A4600;  --warning-bg: #FCF1DF;  --warning-border: #EBC88A;  --warning-solid: #B86E00;
    --danger-text:  #B42318;  --danger-bg:  #FDECEA;  --danger-border:  #F1B5AE;  --danger-solid:  #B42318;
    --danger-solid-hover: #8F1C13;
    --info-text: var(--accent-text);  --info-bg: var(--accent-bg);  --info-border: var(--accent-border);  --info-solid: var(--accent-text);

    /* --- Rôles : les composants n'utilisent QUE ces noms-là */
    --bg:          var(--white);             /* fond de page */
    --bg-subtle:   var(--gray-1);
    --bg-muted:    var(--gray-2);
    --bg-active:   var(--gray-3);
    --bg-elevated: var(--white);             /* modale, panneau, menu, palette */
    --bg-overlay:  rgb(12 17 26 / 0.45);     /* voile derrière une modale */
    --text:          var(--gray-10);
    --text-2:        var(--gray-8);
    --text-3:        var(--gray-7);
    --text-disabled: var(--gray-6);
    --border:         var(--gray-4);
    --border-strong:  var(--gray-5);
    --border-control: var(--gray-6);
    --focus-ring:     var(--accent-text);

    /* --- Jetons du lot 5 (mode sombre) */
    --accent-ink: var(--accent-solid);             /* accent en TEXTE ou contour sur fond neutre (clair = bleu nuit) */
    --login-from: var(--accent-solid);  --login-to: var(--accent-solid-hover);  /* fond de l'écran de connexion */
    --login-logo-bg: var(--brand-navy);  --login-bg: var(--bg-subtle);          /* cartouche du logo et fond de page du login */
    --on-warning: var(--gray-10);                  /* texte sur --warning-solid */
    --violet-text: #5B21B6;  --violet-bg: #F5F3FF;  --violet-border: #8B5CF6;  /* badge activité « outillage » */
    --pink-text:   #9D174D;  --pink-bg:   #FDF2F8;  --pink-border:   #EC4899;  /* badge activité « salon » */
    --focus-glow: rgb(0 77 153 / 0.15);            /* halo de focus des champs */
    --bg-overlay-soft: rgb(255 255 255 / 0.7);     /* voile clair (spinner) */

    /* --- Ombres : 2 niveaux */
    --shadow-1: 0 1px 2px rgb(16 24 40 / 0.06), 0 2px 6px rgb(16 24 40 / 0.06);   /* menu, popover */
    --shadow-2: 0 2px 6px rgb(16 24 40 / 0.08), 0 16px 40px rgb(16 24 40 / 0.16); /* modale, panneau, palette, toast */

    /* --- Typographie : pile système uniquement */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
    --text-xs:  0.75rem;     /* 12 px : badges, méta, raccourcis */
    --text-sm:  0.8125rem;   /* 13 px : cellules de table, libellés, aide */
    --text-md:  0.875rem;    /* 14 px : texte d'interface, boutons, champs */
    --text-lg:  1rem;        /* 16 px : titres de section, texte long */
    --text-xl:  1.25rem;     /* 20 px : titre de page (h1) */
    --text-2xl: 1.5rem;      /* 24 px : valeur d'indicateur */
    --text-3xl: 2rem;        /* 32 px : chiffre vedette (rare) */
    --weight-regular: 400;
    --weight-medium:  500;
    --weight-semibold: 600;
    --leading-tight:  1.25;  /* titres, badges, boutons */
    --leading-snug:   1.4;   /* cellules de table */
    --leading-normal: 1.5;   /* texte courant */
    --tracking-tight: -0.011em; /* titres ≥ 20 px */

    /* --- Espacements : base 4 px */
    --space-1:  0.25rem;  /*  4 */
    --space-2:  0.5rem;   /*  8 */
    --space-3:  0.75rem;  /* 12 */
    --space-4:  1rem;     /* 16 */
    --space-5:  1.25rem;  /* 20 */
    --space-6:  1.5rem;   /* 24 */
    --space-8:  2rem;     /* 32 */
    --space-10: 2.5rem;   /* 40 */
    --space-12: 3rem;     /* 48 */
    --space-16: 4rem;     /* 64 */

    /* --- Rayons : 3 valeurs */
    --radius-sm: 4px;   /* badge, kbd, case, élément de menu ou de nav */
    --radius-md: 6px;   /* bouton, champ, chip, carte, menu */
    --radius-lg: 12px;  /* modale, palette, panneau */

    /* --- Bordures */
    --border-width: 1px;
    --focus-width:  2px;
    --focus-offset: 2px;

    /* --- Dimensions */
    --control-h:    2rem;     /* 32 px */
    --control-h-sm: 1.75rem;  /* 28 px (≥ 24 px, WCAG 2.5.8) */
    --control-h-lg: 2.5rem;   /* 40 px */
    --row-h:         2.75rem; /* ligne de table, densité normale */
    --row-h-compact: 2.25rem; /* densité compacte */
    --sidebar-w:           15rem;
    --sidebar-w-collapsed: 3.5rem;
    --panel-w:   30rem;
    --form-max:  45rem;
    --content-max: 90rem;

    /* --- Mouvement */
    --duration-fast: 120ms;
    --duration:      200ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);

    /* --- Plans */
    --z-sticky: 10;  --z-sidebar: 20;  --z-panel: 30;  --z-popover: 40;  --z-modal: 50;  --z-toast: 60;
  }

  /* --- Thème sombre explicite */
  :root[data-theme="dark"] {
    color-scheme: dark;
    --gray-1:  #121925;  --gray-2:  #192231;  --gray-3:  #222D3E;  --gray-4:  #2B3648;  --gray-5:  #3A475C;
    --gray-6:  #5B6880;  --gray-7:  #808CA1;  --gray-8:  #A3ADBD;  --gray-9:  #CBD2DC;  --gray-10: #EDF0F4;
    --brand-ink: var(--gray-10);
    --accent-solid: #1F4D8F;  --accent-solid-hover: #2A5DA6;  --accent-text: #7FB2F0;
    --accent-bg: #16294A;     --accent-border: #2B4C7E;       --on-accent: #FFFFFF;
    --success-text: #6CCB95;  --success-bg: #11291D;  --success-border: #1F5A3A;  --success-solid: #4CB97E;
    --warning-text: #F0B35E;  --warning-bg: #2D2212;  --warning-border: #6A4B1C;  --warning-solid: #E0A040;
    --danger-text:  #FF8F85;  --danger-bg:  #371816;  --danger-border:  #7A2C27;  --danger-solid:  #C9372C;
    --danger-solid-hover: #B12F25;
    --bg: #0C111A;  --bg-elevated: var(--gray-1);  --bg-overlay: rgb(0 0 0 / 0.6);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 8px rgb(0 0 0 / 0.3);
    --shadow-2: 0 2px 8px rgb(0 0 0 / 0.4), 0 16px 48px rgb(0 0 0 / 0.5);
    --accent-ink: #7FB2F0;
    --login-from: #16294A;  --login-to: #0C111A;  --login-logo-bg: #14243F;  --login-bg: #0C111A;
    --on-warning: #0C111A;
    --violet-text: #C4B5FD;  --violet-bg: #22183F;  --violet-border: #5B3FA8;
    --pink-text:   #F9A8D4;  --pink-bg:   #3A1628;  --pink-border:   #9D2F63;
    --focus-glow: rgb(127 178 240 / 0.3);  --bg-overlay-soft: rgb(12 17 26 / 0.7);
  }

  /* Auto : le navigateur peut rendre barres et champs natifs dans les deux schémas */
  :root[data-theme="auto"] { color-scheme: light dark; }

  /* Sombre suivi du système : opt-in via data-theme="auto" (non actif par défaut dans l'app) */
  @media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
      color-scheme: dark;
      --gray-1:  #121925;  --gray-2:  #192231;  --gray-3:  #222D3E;  --gray-4:  #2B3648;  --gray-5:  #3A475C;
      --gray-6:  #5B6880;  --gray-7:  #808CA1;  --gray-8:  #A3ADBD;  --gray-9:  #CBD2DC;  --gray-10: #EDF0F4;
      --brand-ink: var(--gray-10);
      --accent-solid: #1F4D8F;  --accent-solid-hover: #2A5DA6;  --accent-text: #7FB2F0;
      --accent-bg: #16294A;     --accent-border: #2B4C7E;       --on-accent: #FFFFFF;
      --success-text: #6CCB95;  --success-bg: #11291D;  --success-border: #1F5A3A;  --success-solid: #4CB97E;
      --warning-text: #F0B35E;  --warning-bg: #2D2212;  --warning-border: #6A4B1C;  --warning-solid: #E0A040;
      --danger-text:  #FF8F85;  --danger-bg:  #371816;  --danger-border:  #7A2C27;  --danger-solid:  #C9372C;
      --danger-solid-hover: #B12F25;
      --bg: #0C111A;  --bg-elevated: var(--gray-1);  --bg-overlay: rgb(0 0 0 / 0.6);
      --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 8px rgb(0 0 0 / 0.3);
      --shadow-2: 0 2px 8px rgb(0 0 0 / 0.4), 0 16px 48px rgb(0 0 0 / 0.5);
      --accent-ink: #7FB2F0;
      --login-from: #16294A;  --login-to: #0C111A;  --login-logo-bg: #14243F;  --login-bg: #0C111A;
      --on-warning: #0C111A;
      --violet-text: #C4B5FD;  --violet-bg: #22183F;  --violet-border: #5B3FA8;
      --pink-text:   #F9A8D4;  --pink-bg:   #3A1628;  --pink-border:   #9D2F63;
      --focus-glow: rgb(127 178 240 / 0.3);  --bg-overlay-soft: rgb(12 17 26 / 0.7);
    }
  }

  /* --- Densité compacte (choix utilisateur, sur <html> ou sur un conteneur) */
  [data-density="compact"] { --row-h: var(--row-h-compact); }

  /* --- Mobile : cibles tactiles de 44 px */
  @media (max-width: 640px) {
    :root { --control-h: 2.75rem; --control-h-sm: 2.25rem; --control-h-lg: 2.75rem; --row-h: 3rem; }
  }
}

/* =====================================================================
   Alias hérités : variables de l'ancien styles.css re-pointées vers les
   jetons. Hors couche : ils l'emportent sur un :root hérité de styles.css.
   À supprimer quand plus aucune règle ne les consomme.
   ===================================================================== */
:root {
  --color-primary:       var(--accent-ink);     /* seul usage restant : texte (ao-list.js) */
  --color-primary-light: var(--accent-solid-hover);
  --color-accent:        var(--accent-solid);   /* le rouge est réservé au destructif (--danger) */
  --color-white:         var(--white);
  --color-bg:            var(--bg-subtle);
  --color-surface:       var(--bg-elevated);
  --color-border:        var(--border);
  --color-text:          var(--text);
  --color-text-muted:    var(--text-2);

  --color-en-cours:      var(--warning-solid);
  --color-non-repondu:   var(--gray-6);
  --color-gagne:         var(--success-solid);
  --color-perdu:         var(--danger-solid);
  --color-go:            var(--success-solid);
  --color-nogo:          var(--danger-solid);

  --radius:              var(--radius-md);
  --shadow-sm:           var(--shadow-1);
  --shadow:              var(--shadow-2);
  --transition:          var(--duration) var(--ease);
  --font:                var(--font-sans);
}