/* VIVAMATA : tokens du design system (proposition CSVR 1657, 28/09/2026).
   Contrastes mesurés par contrastes.py. Thème : auto (prefers-color-scheme) + bascule
   manuelle mémorisée, posée en [data-theme] sur <html> par theme.js. */

@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* Couleurs de marque, identiques dans les deux thèmes */
  --viva: #0059DC;          /* accent signature, bleu du logo (CSVR 1682) : boutons, liens, focus */
  --viva-hover: #0049B8;
  --signal: #12D6A0;        /* réservé aux données et aux points de la trame, jamais en texte sur fond clair */
  --ink: #07111F;           /* bleu nuit des bandes sombres (refonte CSVR 2809) */
  --ink-2: #0E1D31;
  --cyan: #56CBF7;          /* accent sur fond sombre seulement : jamais en texte sur fond clair */
  --ldm: #F5BD4F;           /* doré de Lanceur de Marque : sa carte et son encart, nulle part ailleurs */

  /* Couleurs des produits : chacun garde la sienne, dans sa carte seulement */
  --holifolio: #C97D2E;
  --vivacomptoir: #E9A800;
  --pil: #2F9E73;
  --vivacorner: #C2410C;    /* tomate de vivacorner.com (CSVR 3041) */
  --vivasweep: #17594F;     /* vert de vivasweep.com (CSVR 3041) */

  /* Typographie : échelle modulaire 1.25, base 17px */
  --font-sans: "General Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --fs-xs: 0.8125rem;   /* 13 : légendes mono */
  --fs-sm: 0.9375rem;   /* 15 */
  --fs-base: 1.0625rem; /* 17 */
  --fs-md: 1.328rem;    /* 21 */
  --fs-lg: 1.66rem;     /* 26.6 */
  --fs-xl: 2.075rem;    /* 33 */
  --fs-2xl: 2.594rem;   /* 41.5 */
  --fs-3xl: clamp(2.3rem, 1.4rem + 3.2vw, 3.6rem); /* titre du héro */
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.6;
  --measure: 64ch;

  /* Espacement : grille de 8 */
  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px;
  --s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 128px;

  /* Grille */
  --container: 1240px;
  --gutter: clamp(16px, 3vw, 32px);
  --cols: 12;

  /* Formes : 2 rayons, règle unique. Contrôles (boutons, champs) 6px ; conteneurs (cartes, cadres) 12px. */
  --r-control: 10px;
  --r-box: 18px;

  /* Mouvement */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 150ms;
  --t-base: 220ms;

  /* Thème clair (défaut) */
  --bg: #FFFFFF;
  --bg-alt: #F5F8FC;
  --fg: #10233B;
  --muted: #4A5A6F;          /* 6,9:1 sur blanc, 6,5:1 sur --bg-alt (CSVR 2809) */
  --line: #E6EDF5;
  --line-strong: #D3DEEA;
  --field-border: #8A909C;
  --link: #0059DC;
  --signal-text: #0A7A5C;
  --dot: rgba(12, 14, 18, 0.14);
  --shadow: 0 1px 2px rgba(16, 35, 59, 0.05), 0 10px 28px -14px rgba(16, 35, 59, 0.18);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px #0059DC;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0A1626;
  --bg-alt: #0E1D31;
  --fg: #F4F8FF;
  --muted: #BCCBDD;
  --line: #1B2E46;
  --line-strong: #2A405B;
  --field-border: #5B7090;
  --link: #7CC4FF;
  --signal-text: #12D6A0;
  --dot: rgba(231, 234, 240, 0.12);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -16px rgba(0, 0, 0, 0.6);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px #7CC4FF;
  color-scheme: dark;
}

/* Bandes « nuit » : sombres dans les deux thèmes (héros, démonstration, appel final). Elles redéfinissent les jetons,
   donc tout composant posé dedans (boutons, cadres, liens, champs) prend les bonnes couleurs sans règle de plus. */
.nuit {
  --bg: #07111F;
  --bg-alt: #0E1D31;
  --fg: #F4F8FF;
  --muted: #BCCBDD;          /* 11:1 sur #07111F */
  --line: #16283F;
  --line-strong: #2A405B;
  --field-border: #5B7090;
  --link: #7CC4FF;
  --dot: rgba(244, 248, 255, 0.10);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 40px -20px rgba(0, 0, 0, 0.7);
  --focus: 0 0 0 2px #07111F, 0 0 0 4px #7CC4FF;
  background: var(--bg); color: var(--fg); color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; }
}