/*
  Tokens du design « mur d'affiches et trame » : toutes les valeurs de design sont ici.
  Les polices sont auto-hébergées (voir assets/fonts). Le point de marque et le soulignement de la
  navigation sont des SVG générés (scripts/generate-brand-assets.js).
  Les réglages de trame (--ht-*) sont lus par js/halftone.js : cellule en px, rayon en px, opacité de 0 à 1,
  densité = remplissage des points (1 = standard), taille a/b = facteur par encre (a : violet, b : magenta).
*/
:root {
  /* couleurs */
  --paper: #f5f1e8;
  --paper-bright: #fffdf8;
  --white: #ffffff;
  --ink: #111111;
  --cyan: #00aeef;
  --magenta: #ec018c;
  --violet: #4c22b8;
  --yellow: #ffe600;
  --rose-pale: #f6c6e0;
  --error: #b00020;

  /* couleurs des heures (lignes de la journée, pastilles de la carte, bandeau) */
  --dawn: #ffd3b0;
  --noon: #ffe27a;
  --aft: #a8d8ff;
  --dusk: #a998ff;
  --night: #1b1650;

  /* encres des pastilles de trame de la journée (une par heure) */
  --orb-dawn-a: #ff6b3d;
  --orb-dawn-b: var(--magenta);
  --orb-noon-a: #ff9f1c;
  --orb-noon-b: #fff3b0;
  --orb-aft: #ffffff;
  --orb-dusk: #ffe9a8;
  --orb-night: var(--paper);

  /* polices */
  --font-sans: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Anton", Impact, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  /* filets, ombres, voiles */
  --line: 1.5px;
  --shadow-hard: 4px 4px 0 var(--ink);
  --shadow-hard-lg: 8px 8px 0 var(--ink);
  --shadow-poster: 0 16px 26px -14px rgba(0, 0, 0, 0.5), 0 2px 0 rgba(0, 0, 0, 0.16);
  --shadow-poster-hover: 0 28px 34px -16px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(0, 0, 0, 0.16);
  --shadow-tape: 0 1px 2px rgba(0, 0, 0, 0.25);
  --tape: rgba(255, 255, 255, 0.6);
  --scrim: rgba(17, 17, 17, 0.45);
  --grid-line: rgba(17, 17, 17, 0.07);

  /* aberration chromatique : discrète (logo, titres), forte au survol, et sur « quelque chose » */
  --ab-red: rgba(255, 40, 70, 0.5);
  --ab-cyan: rgba(0, 190, 255, 0.5);
  --ab-red-strong: rgba(255, 40, 70, 0.55);
  --ab-cyan-strong: rgba(0, 190, 255, 0.55);
  --over-magenta: rgba(236, 1, 140, 0.85);
  --over-cyan: rgba(0, 174, 239, 0.85);
  --over-sep: 2px;
  --over-sep-max: 4px;

  /* mise en page */
  --gx: clamp(16px, 4vw, 56px);
  --grain: 0.26;

  /* motifs de marque en trame */
  --dot-img: url("../assets/dot.svg");
  --dot-size-brand: 0.36em;
  --dot-size-title: 0.24em;
  --bar-img: url("../assets/bar.svg");
  --bar-w: 6.4px;
  --bar-h: 5.44px;

  /* trame fine des surfaces (décalage des boutons, cadre de la pastille) */
  --surface-cell: 4px;
  --surface-dot: 0.5px;
  --trame-s:
    radial-gradient(circle at 25% 25%, var(--violet) var(--surface-dot), transparent calc(var(--surface-dot) + 0.4px)) 0 0 / var(--surface-cell) var(--surface-cell),
    radial-gradient(circle at 75% 75%, var(--violet) var(--surface-dot), transparent calc(var(--surface-dot) + 0.4px)) 0 0 / var(--surface-cell) var(--surface-cell),
    var(--paper-bright);
  --trame-b:
    radial-gradient(circle at 25% 25%, var(--violet) calc(var(--surface-dot) * 1.8), transparent calc(var(--surface-dot) * 1.8 + 0.5px)) 0 0 / var(--surface-cell) var(--surface-cell),
    radial-gradient(circle at 75% 75%, var(--violet) calc(var(--surface-dot) * 1.8), transparent calc(var(--surface-dot) * 1.8 + 0.5px)) 0 0 / var(--surface-cell) var(--surface-cell),
    var(--paper-bright);

  /* réglages de la trame dessinée en canvas (js/halftone.js) */
  --ht-hero-cell: 12;
  --ht-hero-radius: 76;
  --ht-hero-alpha: 0.85;
  --ht-hero-density: 0.79;
  --ht-hero-size-a: 1.55;
  --ht-hero-size-b: 1.19;
  --ht-map-cell: 40;
  --ht-map-radius: 95;
  --ht-map-alpha: 0.15;
  --ht-map-density: 0.93;
  --ht-map-size-a: 1.1;
  --ht-map-size-b: 0.94;
  --ht-icon-cell: 3.2;
  --ht-icon-density: 0.75;
  --ht-poster-cell: 4.5;
}