/* =========================================================================
   DOMAVIA Design System — tokens runtime
   -------------------------------------------------------------------------
   Fichier servi statiquement et chargé via <link> par static/index.html.
   Source canonique : ce fichier. Le miroir documentaire vit dans
   _commun/references/design_system/colors_and_type.css (snapshot file://
   pour les preview/*.html — ne pas modifier là-bas).
   ========================================================================= */

/* ── Fonts self-hosted (latin + latin-ext) ── */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/static/fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/static/fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/static/fonts/source-sans-3-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/static/fonts/source-sans-3-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url(/static/fonts/source-sans-3-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url(/static/fonts/source-sans-3-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Design tokens ── */
:root {
  /* ─── Color — background & surfaces (dark UI) ─── */
  --bg: #0c0e14;   /* App background — le plus sombre */
  --s1: #151821;   /* Surface 1 — sidebar, topbar, cards, modales, login box */
  --s2: #1c2030;   /* Surface 2 — inputs, selects, hover sur rangée, chrono, chip */

  /* ─── Color — borders ─── */
  --brd: #2a3048;  /* Bordure unique partout (cards, inputs, séparateurs, tabs) */

  /* ─── Color — text ─── */
  --t1: #eaecf4;   /* Texte principal — valeurs, labels, nav actif */
  --t2: #8b92ab;   /* Texte secondaire — labels formulaire, user display, liens topbar */
  --t3: #5c637a;   /* Texte tertiaire — placeholders, headers colonnes, états vides */

  /* ─── Color — brand / primary ─── */
  --blue: #4f8ff7;  /* Bleu primaire — boutons, focus, lien, onglet actif, icône stepper */
  --blue2: #6ba1ff; /* Bleu hover / logo — 1 cran plus clair */

  /* ─── Color — semantic ─── */
  --danger: #e05252;       /* Rouge — erreur, statut éliminé, bouton destructif, bordure alerte */
  --danger-hover: #c94444; /* Hover sur boutons destructifs (btn-confirm-danger, btn-supprimer, ec1-btn-danger) */
  --success: #2ecc71;      /* Vert — succès, statut qualifié/actif, critères mot de passe remplis */
  --warning: #e67e22;      /* Orange — avertissement discret (utilisé ec1.css) */
  --warning-soft: #ffa500; /* Orange 2 — btn-transfert utilisateurs */
  --info: #7c3aed;         /* Violet — persona badge EC1 (la seule vraie touche hors bleu) */

  /* ─── Color — overlays ─── */
  --overlay: rgba(0, 0, 0, 0.55);   /* confirm-overlay, dirty-overlay (spec modals.html) */

  /* ─── Color — semantic alpha backgrounds (tints) ─── */
  --blue-tint-12:    rgba(79, 143, 247, 0.12);   /* nav-item actif */
  --blue-tint-15:    rgba(79, 143, 247, 0.15);   /* statut en_cours, btn-renvoyer */
  --blue-tint-08:    rgba(79, 143, 247, 0.08);   /* ec1-search-multiple bg */
  --blue-tint-25:    rgba(79, 143, 247, 0.25);   /* hover btn-pack/renvoyer/email utilisateurs */
  --success-tint-12: rgba(46, 204, 113, 0.12);   /* profil-success, login-success */
  --success-tint-15: rgba(46, 204, 113, 0.15);   /* statut qualifié */
  --success-tint-08: rgba(46, 204, 113, 0.08);   /* ec1-search-found bg */
  --success-tint-25: rgba(46, 204, 113, 0.25);   /* hover btn-reactiver, border step-done */
  --danger-tint-10:  rgba(224, 82, 82, 0.10);    /* session-warning bg */
  --danger-tint-12:  rgba(224, 82, 82, 0.12);    /* login-error bg */
  --danger-tint-15:  rgba(224, 82, 82, 0.15);    /* statut éliminé */
  --danger-tint-08:  rgba(224, 82, 82, 0.08);    /* ec1-elimination-block bg (très léger) */
  --danger-tint-05:  rgba(224, 82, 82, 0.05);
  --danger-tint-25:  rgba(224, 82, 82, 0.25);    /* hover btn-suspendre, monitoring-purge */
  --neutral-tint-15: rgba(139, 146, 171, 0.15);  /* statut abandonné / supprimé */
  --neutral-tint-25: rgba(139, 146, 171, 0.25);  /* hover btn-anonymiser */
  --warning-tint-08: rgba(230, 126, 34, 0.08);   /* ec1-warning bg, bannières warning */
  --warning-tint-15: rgba(255, 165, 0, 0.15);    /* btn-transfert */
  --warning-tint-25: rgba(230, 126, 34, 0.25);   /* hover btn-transfert/renvoyer, border bannières warning */
  --persona-tint-12: rgba(139, 92, 246, 0.12);   /* persona badge */

  /* ─── Typography — families ─── */
  --font-display: 'Outfit', 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ─── Typography — weights (utilisés dans le codebase) ─── */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* ─── Typography — sizes (rem, base 16px) ─── */
  --fs-xs:   0.72rem;  /* step labels EC1 */
  --fs-s:    0.78rem;  /* badges, th tableau, critères mdp */
  --fs-sm:   0.82rem;  /* labels form section (UPPERCASE) */
  --fs-md:   0.85rem;  /* labels, boutons, nav items, small UI text */
  --fs-body: 0.9rem;   /* corps — cellules de tableau, inputs, paragraphes UI */
  --fs-lg:   0.95rem;  /* profil values */
  --fs-h3:   1rem;     /* section headers profil */
  --fs-h2:   1.3rem;   /* titres de page — content h2 */
  --fs-h1:   1.6rem;   /* login heading "DOMAVIA" */

  /* ─── Typography — line-height ─── */
  --lh-tight: 1.4;     /* modales, paragraphes */
  --lh-body:  1.5;     /* scripts CRH, info blocks */

  /* ─── Typography — letter-spacing ─── */
  --ls-logo:     5px;     /* wordmark DOMAVIA (login + sidebar) */
  --ls-subtitle: 2px;     /* sous-titre login */
  --ls-caps:     0.04em;  /* UPPERCASE labels (th, form section h3, profil-label) */
  --ls-caps-s:   0.03em;  /* variantes */
  --ls-nav:      0.5px;   /* nav group headers */

  /* ─── Layout ─── */
  --sidebar-w:           220px;
  --sidebar-w-collapsed: 60px;
  --topbar-h:            52px;

  /* ─── Radius ─── */
  --r-sm: 4px;    /* badges (statut, persona) */
  --r-md: 5px;    /* nav items, topbar-logout, profil inputs, small buttons */
  --r-lg: 6px;    /* inputs, boutons, blocs message, cards internes */
  --r-xl: 10px;   /* login-box, modales (confirm, dirty) */

  /* ─── Spacing scale ─── */
  --sp-1:  0.15rem;
  --sp-2:  0.3rem;
  --sp-3:  0.4rem;
  --sp-4:  0.5rem;
  --sp-5:  0.6rem;
  --sp-6:  0.75rem;
  --sp-7:  0.9rem;
  --sp-8:  1rem;
  --sp-10: 1.2rem;
  --sp-12: 1.5rem;
  --sp-16: 2rem;

  /* ─── Transitions ─── */
  --dur-fast:   0.15s;
  --dur-normal: 0.2s;
  --ease:       ease;
}