/* ============================================================
   tokens.css — Design system « Engineered Calm » (R&S Telecom / PRT)
   Custom properties only. Couleurs, rayons, ombres, durées, easings.
   Ordre de chargement : fonts.css -> tokens.css -> base.css -> layout.css -> components.css
   Valeurs verrouillées — extraites fidèlement de la maquette approuvée.
   ============================================================ */

/* ---- Light (defaut) ---- */
:root,
[data-layout-mode="light"] {
  /* Typographie — rôles partagés, fixes dans le produit. */
  --font-sans: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  --font-display: 'Bricolage Grotesque', 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --text-caption: .75rem;
  --text-meta: .8125rem;
  --text-control: .875rem;
  --text-body-dense: .9375rem;
  --text-body: 1rem;
  --text-section: 1.125rem;
  --text-heading: 1.25rem;
  --text-page: 1.5rem;
  --text-data: 1.75rem;
  --leading-tight: 1.15;
  --leading-ui: 1.4;
  --leading-body: 1.6;
  --leading-reading: 1.7;
  --measure-reading: 65ch;
  --measure-wide: 72ch;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --layout-content-max: 1800px;
  --layout-gutter: var(--space-xl);
  --layout-gutter-tablet: var(--space-lg);
  --layout-gutter-mobile: var(--space-md);

  --signal-azure: #1E5FA8;
  --signal-azure-deep: #184E8C;
  --signal-azure-soft: #E8F0F9;
  --on-azure: #FBFCFE;
  --focus: var(--signal-azure);
  /* Les boutons pleins reprennent le graphite de la barre latérale. */
  --action-fill: var(--sidebar-bg);
  --action-fill-hover: var(--brand-graphite);
  --on-action: #FFFFFF;

  --brand-graphite: #454545;
  --on-brand-graphite: #FFFFFF;

  --green: #2E9E4F; --green-soft: #E6F5EB; --green-text: #1F6233;
  --amber: #B8791A; --amber-soft: #FBF1E1; --amber-text: #7C520F;
  --red: #C23B3B; --red-soft: #FBEAEA; --red-text: #8A2828;

  --paper-bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-sunken: #EEF1F6;
  --ink-strong: #1A2230;
  --ink-default: #2C3645;
  --ink-muted: #586475;
  --border-hairline: #E2E7EE;
  --border-strong: #C9D2DD;
  /* Bordure des contrôles de saisie : 3,38:1 sur --surface, exigé par WCAG 1.4.11.
     --border-hairline (1,24:1) reste réservé aux séparateurs décoratifs. */
  --border-control: #7E8DA1;

  /* Alias de compatibilité : un seul vocabulaire de tokens pour les modules métier. */
  --ink-subtle: var(--ink-muted);
  --ink-faint: var(--ink-muted);
  --border: var(--border-hairline);

  /* Topbar: tinted/saturated glassy console (graft from F) - opaque fallback below */
  --topbar-bg: #FBFCFE;
  --topbar-tint: color-mix(in srgb, var(--surface) 88%, var(--signal-azure-soft));
  --scrim: rgba(26,34,48,.42);
  /* Voile unique pour toutes les fenêtres superposées. */
  --overlay-backdrop: color-mix(in srgb, var(--scrim) 88%, var(--paper-bg) 12%);
  /* Les notifications transitoires doivent rester lisibles au-dessus des modales. */
  --z-table-header: 1;
  --z-filter-bar: 10;
  --z-popover: 50;
  --z-toast: 1000000;

  /* La navigation conserve le graphite du logo dans les deux thèmes ;
     seuls le canevas et les surfaces de contenu restent clairs ici. */
  --sidebar-bg: #181818;
  --sidebar-bg-2: #181818;
  --sidebar-text: #D4D4D4;
  --sidebar-muted: #9A9A9A;
  --sidebar-active: #F0F0F0;
  --sidebar-hairline: rgba(212,212,212,.10);
  --sidebar-hover: rgba(212,212,212,.07);
  --sidebar-active-bg: rgba(69,69,69,.82);
  --sidebar-top-highlight: rgba(255,255,255,.05);
  --sidebar-text-bright: #F2F2F2;

  --shadow-lifted: 0 1px 2px rgba(26,34,48,.06), 0 2px 8px rgba(26,34,48,.06);
  --shadow-floating: 0 8px 24px rgba(26,34,48,.12);
  --shadow-overlay: 0 16px 48px rgba(26,34,48,.20);
  --shadow-card: var(--shadow-lifted);
  --shadow-subtle: var(--shadow-lifted);
  --shadow-sm: var(--shadow-lifted);

  --azure-series: #1E5FA8;
  --violet-series: #6970dd;
  --muted-series: #B9C4D2;

  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
  --dur-fast: 140ms; --dur-base: 200ms; --dur-slow: 240ms;
  --dur-normal: var(--dur-base);
  --ease: cubic-bezier(.25,.8,.5,1);
  --ease-quint: cubic-bezier(.22,1,.36,1);
}

/* ---- Dark ---- */
[data-layout-mode="dark"] {
  /* L'accent sombre reprend le graphite du logo. Les tons clairs conservent
     un contraste lisible pour le texte, les focus et les graphiques. */
  --signal-azure: #B8B8B8;
  --signal-azure-deep: #D0D0D0;
  --signal-azure-soft: rgba(69,69,69,.58);
  --on-azure: #181818;
  --action-fill: var(--signal-azure);
  --action-fill-hover: var(--signal-azure-deep);
  --on-action: var(--on-azure);

  --green: #62C77F; --green-soft: rgba(46,158,79,.16); --green-text: #79D693;
  --amber: #E0B25E; --amber-soft: rgba(184,121,26,.18); --amber-text: #ECC988;
  --red: #E08A8A; --red-soft: rgba(194,59,59,.16); --red-text: #EFA3A3;

  /* Dark : cartes sur le meme fond que la page (#181818) — distinction par bordure,
     comme en light (surface == paper-bg == #FFF). Plus de carte « plus claire » que la page.
     surface-sunken reste un cran au-dessus (recessed = plus clair en dark) pour inputs/wells. */
  --paper-bg: #181818;
  --surface: #181818;
  --surface-sunken: #222222;
  --ink-strong: #F2F2F2;
  --ink-default: #D8D8D8;
  --ink-muted: #9C9C9C;
  --border-hairline: #303030;
  --border-strong: #454545;
  --border-control: #6E6E6E;

  --topbar-bg: #181818;
  /* Dark: keep the tint very subtle so contrast vs ink stays legible (must-fix #8) */
  --topbar-tint: color-mix(in srgb, var(--surface) 92%, var(--signal-azure-soft));
  --scrim: rgba(0,0,0,.58);
  /* Voile unique pour toutes les fenêtres superposées. */
  --overlay-backdrop: color-mix(in srgb, var(--scrim) 88%, var(--paper-bg) 12%);

  --sidebar-bg: #181818;
  --sidebar-bg-2: #181818;
  --sidebar-text: #D4D4D4;
  --sidebar-muted: #9A9A9A;
  --sidebar-active: #F0F0F0;
  --sidebar-hairline: rgba(212,212,212,.10);
  --sidebar-hover: rgba(212,212,212,.07);
  --sidebar-active-bg: rgba(69,69,69,.82);
  --sidebar-top-highlight: rgba(255,255,255,.05);
  --sidebar-text-bright: #F2F2F2;

  --shadow-lifted: 0 1px 2px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.30);
  --shadow-floating: 0 8px 24px rgba(0,0,0,.42);
  --shadow-overlay: 0 16px 48px rgba(0,0,0,.55);

  --azure-series: #B8B8B8;
  --violet-series: #858585;
  /* Dark comparison-series: dedicated token with real contrast against gridlines (must-fix #3) */
  --muted-series: #686868;
}

/* Ton de la barre latérale désormais STATIQUE (gris-noir #181818, cf. --sidebar-bg).
   L'ancien ton « clair » est neutralisé : un data-sidebar="clair" résiduel (localStorage)
   n'a plus d'effet → la sidebar reste grise dans les deux thèmes. */