/* GÉNÉRÉ par site/tools/build_site.py — NE PAS ÉDITER À LA MAIN.
 *
 * Source : remotion/src/lib/designTokens.ts (ce qu'EST la marque) et
 * layout.ts (ce que le CADRE impose). Toute valeur d'ici a un antécédent
 * dans ces deux fichiers ; site.css ne connaît que des var(--ito-*).
 *
 * Régénérer : npm run site:build
 */

:root {
  color-scheme: light;

  /* Couleurs — chaque teinte garde le NOM de son rôle dans la charte. */
  --ito-background-cream: #FBF6EC;
  --ito-background-sage: #EAF0E4;
  --ito-surface-card: #FFFFFF;
  --ito-ink-navy: #1F3A5F;
  --ito-slate-muted: #5B6B7A;
  --ito-accent-terracotta: #E8825A;
  --ito-accent-sky: #7FB8D9;
  --ito-accent-sun: #F4C763;
  --ito-positive-sage: #8FAE87;
  --ito-alert-coral: #E8646B;
  --ito-border-sand: #E4D9C4;
  --ito-pop-orange: #F25C0B;
  --ito-pop-cyan: #12B5E5;
  --ito-pop-yellow: #FFD21C;
  --ito-paper-kraft: #CBA476;
  --ito-paper-skin: #F6D9BC;
  --ito-paper-hair: #3A2E2A;
  --ito-paper-earth: #8A6A4B;
  --ito-outline-ink: #101820;

  /* Voix — l'accent d'un hôte n'est pas décoratif, il l'identifie. */
  --ito-voice-mia: var(--ito-pop-orange);
  --ito-voice-leo: var(--ito-pop-cyan);

  /* Polices — les trois rôles de la charte, avec leur repli système. */
  --ito-font-title: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --ito-font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ito-font-label: 'Quicksand', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Échelle de tailles.
   *
   * Les px de TYPE_SCALE appartiennent au CADRE : 96 px de titre, c'est 96
   * px sur 1080 de large, vus à bout de bras sur un téléphone. Une page web
   * n'a pas ce cadre, et reprendre ces px tels quels donnerait un corps de
   * texte de 34 px — illisible en paragraphe.
   *
   * Ce que la charte possède vraiment, ce sont les RAPPORTS entre ses sept
   * tailles. Le site les reprend intacts, ancrés sur une unité de lecture :
   * cette unité vaut TYPE_SCALE.body en px de PLANCHE (17 px, la taille que
   * le lookbook a validée à petite échelle) sur mobile, et grandit d'un
   * facteur 1.25 sur grand écran. Une seule constante ajoutée, au lieu de sept
   * tailles inventées ; changer TYPE_SCALE change encore tout le site. */
  --ito-text-unit: clamp(1.0625rem, 0.969rem + 0.3991vw, 1.3281rem);
  --ito-text-display: calc(var(--ito-text-unit) * 2.8235);
  --ito-text-h1: calc(var(--ito-text-unit) * 1.8824);
  --ito-text-h2: calc(var(--ito-text-unit) * 1.2941);
  --ito-text-body: calc(var(--ito-text-unit) * 1);
  --ito-text-caption: calc(var(--ito-text-unit) * 2);
  --ito-text-label: calc(var(--ito-text-unit) * 0.7647);
  --ito-text-tag: calc(var(--ito-text-unit) * 0.5882);

  --ito-font-of-body: var(--ito-font-body);
  --ito-font-of-caption: var(--ito-font-body);
  --ito-font-of-display: var(--ito-font-title);
  --ito-font-of-h1: var(--ito-font-title);
  --ito-font-of-h2: var(--ito-font-title);
  --ito-font-of-label: var(--ito-font-label);
  --ito-font-of-tag: var(--ito-font-label);

  /* Espacements — SPACING est déjà en px de PLANCHE : ces crans se lisent
   * tels quels sur une page, sans conversion de cadre. */
  --ito-space-3xs: 0.4375rem;
  --ito-space-2xs: 0.8125rem;
  --ito-space-xs: 1.25rem;
  --ito-space-sm: 1.625rem;
  --ito-space-md: 2.4375rem;
  --ito-space-lg: 3.25rem;
  --ito-space-xl: 4.875rem;
  --ito-space-2xl: 6.5rem;

  /* Contour cartoon — la signature du système : un cerne épais et une
   * ombre DURE (un aplat décalé), jamais un flou décoratif. OUTLINE est
   * en px natifs, donc ramené comme le reste à l'échelle de planche. */
  --ito-outline-hairline: 1px;
  --ito-outline-standard: 2px;
  --ito-outline-bold: 3px;
  --ito-shadow-offset: 3px;
  --ito-shadow-hard: var(--ito-shadow-offset) var(--ito-shadow-offset) 0 var(--ito-outline-ink);

  /* Rayons — la charte n'en porte pas de table. Ils sont DÉRIVÉS de
   * l'échelle d'espacement, cran pour cran, plutôt qu'inventés. */
  --ito-radius-sm: var(--ito-space-2xs);
  --ito-radius-md: var(--ito-space-sm);
  --ito-radius-lg: var(--ito-space-md);
  --ito-radius-pill: 999px;

  /* Mouvement — registre « posé, respirant » (brand-bible §2). Les durées
   * de la charte sont en ms : directement lisibles ici, sans fps. */
  --ito-motion-fade-in: 500ms;
  --ito-ease-fade-in: ease-out;
  --ito-motion-fade-out: 400ms;
  --ito-ease-fade-out: ease-in;
  --ito-motion-pop-in: 350ms;
  --ito-ease-pop-in: ease-out;
  --ito-motion-paper-stagger: 330ms;
  --ito-ease-paper-stagger: ease-out;
  --ito-motion-paper-draw: 900ms;
  --ito-ease-paper-draw: ease-in-out;
  --ito-motion-scene-crossfade: 400ms;
  --ito-ease-scene-crossfade: ease-in-out;
  --ito-motion-zoom: 1200ms;
  --ito-ease-zoom: ease-out;

  /* Trame papier — relevée sur la planche 9:16. */
  --ito-paper-dot: 1.5px;
  --ito-paper-cell: 22px;
  --ito-paper-opacity: 0.9;
}