/* ============================================================
   Romane : JETONS. Ce fichier est le MIROIR mot pour mot des cinq fichiers
   `Meridian Design System/tokens/` (fonts, colors, typography, spacing,
   effects, dans l'ordre du _ds_manifest.json). NE PAS EDITER LE BLOC MIROIR
   ICI : editer le DS, recopier, puis lancer tests/test_design_system.py, qui
   refuse toute derive. Seule retouche toleree : les `url()` des polices,
   servies en /static/fonts (jamais Google Fonts : vie privee + CSP).

   Le bloc « Extensions Meridian app » en fin de fichier nomme les valeurs
   que le DS emploie en litteral (rgba de la barre laterale, survol d'une
   rangee, piste des onglets...) : ici, aucune couleur ni aucun rayon n'existe
   hors d'un jeton, et style.css ne porte AUCUN :root.
   ============================================================ */

/* ---- fonts.css (miroir) ---- */
/* Polices servies localement (jamais Google Fonts : vie privée + CSP).
   Poppins est STATIQUE (un fichier par graisse) et `font-synthesis: none` :
   toute graisse employée par le produit doit avoir son @font-face ici, sinon
   le navigateur retombe sur la plus proche sans la grossir. Le produit emploie
   400, 500, 600, 700 et l'italique 400 : cinq fichiers, pas un de plus. */
@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---- colors.css (miroir) ---- */
/* Romane — couleurs, palette « Noir et or » (test de branding Romane,
   2026-09-25). Les NOMS des jetons ne bougent pas — `--blue` reste `--blue`,
   partout dans le produit — seules les valeurs changent. Renommer aurait
   touché 300 déclarations pour un test de marque ; la sémantique, elle, est
   intacte : le jeton qui portait la voix de l'IA la porte toujours.
   Règle sémantique : UNE COULEUR, UN SENS.
   or = l'IA et ses agents (liens, scores, badges, voix de Romane)
   noir = l'action primaire et les surfaces de marque (barre latérale, bulles)
   vert = prêt / réussi / obtenu, à vous d'agir · ambre = attente ou attention
   rouge = irréversible, destructeur ou sans suite · gris = neutre, dormant, archivé
   mauve = rencontre prise · bleu = gagné, plus rien à faire (2026-10-07) */
:root {
  /* Papiers (off-white froids : l'or est chaud, le fond ne doit pas l'être) */
  --paper: #F6F7F8; --paper-2: #FFFFFF; --paper-3: #F0F1F3; --paper-4: #E8EAEC;
  --paper-head: #FBFBFC;  /* rangée d'en-tête des tables « Outlook » */
  --paper-inset: #FDFDFE; /* corps déplié d'une rangée (message ouvert) */
  --white: #FFFFFF;

  /* Encres */
  --ink: #1B1D1F; --ink-2: #3C4043; --ink-3: #6C7075; --ink-4: #9CA1A6;
  --ink-lbl: #84888C; /* méta seulement : dates, sous-textes, mentions */
  --ink-title: #3C4043;

  /* Filets */
  --line: #E5E7EA; --line-strong: #D6D9DD; --line-mute: #C5C9CE;
  --line-on-dark: rgba(255,255,255,.16);

  /* Ors — la voix de l'IA. `--blue-deep` est le noir de marque : il ouvre la
     famille parce que c'est lui qui porte la barre latérale et l'action
     primaire, les deux surfaces sur lesquelles l'or se pose. */
  --blue: #B8860B; --blue-strong: #946A00; --blue-deep: #16171A;
  --blue-bright: #F0C24A; --blue-light: #F4E4BC; --blue-slate: #A6905A;
  --blue-tint: #FBF4E2; --blue-tint-2: #F4E4BC; --blue-line: #E0BE72;

  /* Action primaire : le noir de la barre latérale */
  --primary: var(--blue-deep); --primary-hover: #2A2C30;

  /* Sémantique */
  --ok: #2F7048; --ok-tint: #E8F1EA;
  --warn: #B4531C; --warn-tint: #FBEDE3;
  --danger: #9E2B25; --danger-tint: #F9E9E7;
  --violet: #6A4C9C; --violet-tint: #EFE9F7;
  --azur: #2E5E99; --azur-tint: #E6EEF8;
  --info: var(--blue); --info-tint: var(--blue-tint);

  /* Alias sémantiques */
  --surface-card: var(--white); --surface-ai: var(--blue-tint);
  --text-body: var(--ink); --text-secondary: var(--ink-2); --text-muted: var(--ink-3);
  --text-ai: var(--blue-strong);
  --accent: var(--blue); --accent-soft: var(--blue-tint);
  --focus-ring: var(--blue);
  /* Encre POSÉE SUR --blue-bright (compteur de nav, avatar, badge mobile) :
     du noir, jamais le marine d'avant. Elle a son nom parce que l'or clair
     n'accepte pas l'encre blanche. */
  --sur-clair: #16171A;
  --fav: var(--blue-deep); /* étoile Favorite (pipeline) : posée = noire */
}

/* ---- typography.css (miroir) ---- */
/* Romane — typographie. Poppins partout, jusqu'aux chiffres : les scores,
   les coûts et les dates tabulaires sont des CHIFFRES TABULAIRES de Poppins
   (`font-variant-numeric: tabular-nums`), pas une seconde famille. --font-mono
   reste le nom de la donnée alignée ; --font-code est la vraie chasse fixe,
   celle du code et des journaux, qui doit rester une police de terminal. */
:root {
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Poppins', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --fs-12 est le PLANCHER du texte (2026-09-11) : tout ce qui se lit est a
     12 px ou plus. --fs-11 et les litteraux plus petits sont reserves a ce qui
     ne se lit pas en phrases : un chevron, une fleche de tri, un chiffre dans
     une pastille ronde, et le pied de la barre laterale (version, credit). */
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px;
  --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-22: 21px; --fs-28: 28px; --fs-36: 40px;

  --lh-tight: 1.08; /* @kind font */ --lh-snug: 1.28; /* @kind font */ --lh-body: 1.5; /* @kind font */
  --track-caps: .07em; --track-display: -.022em; --track-title: -.014em;

  /* Composites prêts à l'emploi */
  --text-display: 600 var(--fs-36)/var(--lh-tight) var(--font-display);
  --text-title: 600 var(--fs-22)/var(--lh-snug) var(--font-display);
  --text-body-md: 400 var(--fs-14)/var(--lh-body) var(--font-sans);
  --text-label: 500 var(--fs-13)/1.2 var(--font-sans);
  --text-caps: 600 var(--fs-12)/1.2 var(--font-sans);
  --text-data: 500 var(--fs-13)/1.2 var(--font-mono);
  --text-voice: 400 var(--fs-18)/var(--lh-snug) var(--font-display);
  /* En-tête de colonne des tables « Outlook » : au plancher lui aussi, il
     etait le plus petit texte du produit (10,5 px). */
  --text-th: 600 var(--fs-12)/1.2 var(--font-sans);
}

/* ---- spacing.css (miroir) ---- */
/* Romane — espacement, rayons, contrôles. */
:root {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* Rayons. --r-xs est la direction « Outlook » approuvée : panneaux, tables
     et champs doucement arrondis (8px) ; les cartes d'agents prennent 10px.
     Demande utilisateur : « 5 % plus rond » le 2026-09-10 (4 et 5 px), puis
     « 10 % » le 2026-09-11, d'où le double. Les boutons gardent --r-sm ;
     pastilles et badges restent en --r-pill. */
  --r-xs: 8px; --r-agent: 10px;
  --r-sm: 9px; --r-md: 16px; --r-lg: 20px; --r-pill: 999px;

  --control-h: 36px; --control-h-sm: 28px; --control-h-lg: 44px;
  --sidebar-w: 236px;
  --fab-h: 44px; --fab-gap: 20px; --fab-bottom: 0px;

  /* Table « Outlook » : rangées égales, en-têtes en capitales.
     --row-pad-y est LE bouton de respiration verticale : toute rangée qui se
     dimensionne par son contenu (paires libellé/valeur, critères, en-têtes et
     pieds de carte) le prend, plutôt que son propre 10 ou 12 px. Monté de
     56/11 à 64/14 px le 2026-09-11 : « je trouve les rangées assez cramped,
     aère un peu plus, partout dans l'app ». */
  --row-h: 64px; --row-pad-x: 18px; --row-pad-y: 14px;
  /* En-tete collant : titre 20 px puis sous-titre 13 px sur sa propre ligne
     (2026-09-11), 16 px de marge en haut et en bas pour que le titre respire.
     Les surfaces collantes sous l'en-tete s'y accrochent. */
  --top-h: 80px;
}

/* ---- effects.css (miroir) ---- */
/* Romane — ombres et mouvement. v2 : pas d'ombre au repos ; l'ombre
   n'apparaît qu'au survol d'une carte-lien ou sur l'élément actif. */
:root {
  --shadow-card: none;
  --shadow-hover: 0 2px 10px rgba(22,31,27,.06);
  --shadow-pill: 0 1px 3px rgba(22,31,27,.1);
  --shadow-raised: 0 2px 6px rgba(22,31,27,.08), 0 1px 2px rgba(22,31,27,.05);
  --shadow-overlay: 0 12px 40px rgba(14,43,34,.18), 0 2px 8px rgba(22,31,27,.08);
  --shadow-menu: 0 8px 24px rgba(22,31,27,.12);

  --ease: cubic-bezier(.25,.6,.3,1); /* @kind other */
  --t-fast: 130ms; /* @kind other */ --t-med: 200ms; /* @kind other */
}

@keyframes mds-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184,134,11,.35); }
  50% { box-shadow: 0 0 0 6px rgba(184,134,11,0); }
}
@keyframes busy-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   Extensions Meridian app (hors DS). Chaque jeton cite le litteral qu'il
   remplace et l'endroit ou le DS l'emploie.
   ============================================================ */
:root {
  /* Survol d'une rangee Outlook : `#F3F4F6` dans DataTable.jsx et
     guidelines/table-outlook.html (un cran sous --paper, comme avant). */
  --paper-hover: #F3F4F6;
  /* Survol du bouton destructeur : `#7E221D` dans Button.jsx. */
  --danger-hover: #7E221D;
  /* Piste des onglets (controle segmente) : `border-radius: 12px` dans Tabs.jsx. */
  --r-track: 12px;
  /* Barre laterale noire et en-tete mobile (Shell.jsx) : texte des liens
     `rgba(255,255,255,.68)`, lien actif `.13`, meta `.55`. Le survol (.08)
     est propre a l'app. */
  --nav-fg: rgba(255,255,255,.68);
  --nav-fg-dim: rgba(255,255,255,.55);
  --nav-bg-hover: rgba(255,255,255,.08);
  --nav-bg-active: rgba(255,255,255,.13);
  /* En-tete collant translucide : `rgba(246,247,248,.88)` dans Shell.jsx,
     c'est-a-dire --paper a 88 %. */
  --topbar-bg: rgba(246,247,248,.88);
  /* Voile sous un dialogue ou le tiroir mobile : `rgba(14,43,34,.35)` dans Dialog.jsx. */
  --scrim: rgba(14,43,34,.35);
  /* Ombre du tiroir de navigation mobile (surface flottante, meme famille
     que --shadow-overlay). */
  --shadow-drawer: 8px 0 32px rgba(27,29,31,.35);
  /* Pas de synthese de gras ou d'italique : Poppins est STATIQUE, et les
     cinq @font-face du miroir couvrent tout ce que le produit emploie
     (400, 500, 600, 700, italique 400). Une graisse ajoutee dans style.css
     sans son fichier retomberait sur la plus proche, sans etre grossie. */
  font-synthesis: none;
}