/*
 * Thème « arcade » — direction C du canvas, reproduite (ECL-21, ECL-51).
 *
 * Steven, 11/09 : « pour le jeu, un thème arcade serait sympa », puis, capture
 * de la prod à l'appui : « les couleurs n'ont rien à voir avec l'option C
 * Arcade que tu m'avais proposée ». Le violet sombre livré à ECL-21 était la
 * PREUVE technique que les écrans ignorent leur esthétique — pas la direction
 * validée. La voici, telle que l'artboard `DirectionC.dc.html` la pose :
 *
 *   « Arcade » · ludique, contours épais, jaune plein, corail pour les pièges.
 *
 * Fond jaune `#FFD23F` à trame de points navy, cartes blanches à bordure
 * pleine de 3 px, ombres DURES décalées, coins arrondis, Bungee en enseigne et
 * Rubik en texte. Aucune règle de composant ici : un thème est une liste de
 * valeurs, sinon la bascule cesse d'être vraie.
 *
 * Ce que ce thème a appris au contrat (ECL-51) : **une couleur qui remplit
 * n'est pas une couleur qui écrit**. Sur `nuit` et `marche`, tous deux sombres
 * ou papier, le même jaune pouvait servir de fond de bouton et de texte. Ici
 * le jaune EST la page : il ne peut plus rien écrire. D'où `--q-ai` (remplit),
 * `--q-ai-ink` (écrit) et `--q-ai-on` (s'écrit sur l'accent) — et la même
 * découpe pour `--q-bad` et `--q-primary`.
 */

/*
 * Bungee — Copyright 2023 The Bungee Project Authors
 * (https://github.com/djrrb/Bungee). SIL Open Font License 1.1, texte intégral
 * dans `public/fonts/bungee-OFL.txt`. Sous-ensemble latin de
 * `@fontsource/bungee` : 14,0 ko, une seule graisse (400) — c'est pourquoi
 * `--q-display-weight` vaut 400 : à 700 le navigateur SYNTHÉTISE un gras et
 * l'enseigne s'empâte.
 *
 * Rubik — Copyright 2015 The Rubik Project Authors
 * (https://github.com/googlefonts/rubik). SIL OFL 1.1,
 * `public/fonts/rubik-OFL.txt`. Sous-ensemble latin, trois graisses
 * (400 / 500 / 700), 18,5 à 18,7 ko chacune.
 *
 * Les deux sont SERVIES PAR L'APP : `font-src 'self'`
 * (src/lib/security-headers.js) interdit un CDN, comme pour Inter et
 * Bricolage. `nuit` et `marche` gardent les leurs.
 */
@font-face {
  font-family: 'Bungee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bungee-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/rubik-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/rubik-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/rubik-latin-700-normal.woff2') format('woff2');
}

.quest-v2[data-quest-theme='arcade'] {
  /* palette — le jaune de la direction C, en APLAT : les deux premiers arrêts
     du dégradé de la scène sont la MÊME valeur, et le troisième à peine plus
     dense (il sert aussi de fond à la trace du jeudi, qui doit se détacher
     dans sa carte blanche). */
  --q-bg-1: #ffd23f;
  --q-bg-2: #ffd23f;
  --q-bg-3: #f7c81f;

  /* La trame de points navy de l'artboard, portée par le seul token qui
     accepte une couche d'image. Un point de 1,2 px tous les 22 px : c'est la
     texture d'un plateau de jeu, et elle ne bouge pas. */
  --q-bg-texture: radial-gradient(rgb(15 27 61 / 22%) 1.2px, transparent 1.2px) 0 0 / 22px 22px;

  --q-surface: #ffffff;
  --q-surface-2: #f2f4ff;
  --q-border: #0f1b3d;
  --q-border-strong: #0f1b3d;
  --q-text: #0f1b3d;
  --q-text-muted: #3d4a72;
  --q-text-dim: #5b6893;

  /* L'accent IA : le jaune REMPLIT (bouton principal, numéro d'un pas), le
     bleu ÉCRIT (liens, valeurs mises en avant, anneaux), le navy s'écrit sur
     le jaune. Le `[AI]` du logo, lui, garde le jaune brut — ADR-0004 — et
     c'est la pastille de marque qui le rend lisible. */
  --q-ai: #ffd23f;
  --q-ai-soft: #eef0ff;
  --q-ai-ink: #3a47ff;
  --q-ai-on: #0f1b3d;

  --q-primary: #3a47ff;
  /* « Soft » dit la SURFACE d'un état, pas forcément un lavis : ici une carte
     posée est un aplat bleu à texte blanc, comme sur l'artboard. */
  --q-primary-soft: #3a47ff;
  --q-primary-ink: #ffffff;

  --q-good: #147d55;
  /* Corail : le piège, l'opposition — une bordure, un badge, une barre. */
  --q-bad: #ff6b57;
  /* Le corail ne se lit pas en texte sur du blanc (2,8:1) : quand la faute
     s'ÉCRIT, elle est rouge. */
  --q-bad-ink: #b3261e;
  --q-warn: #b3261e;

  /* Ce qui est ACTIF porte une pastille navy à texte JAUNE (les jours, les
     semaines) — l'enseigne allumée de la direction C, 9,4:1 ; la marque a la
     sienne, pour que son `[AI]` jaune tienne sur une page jaune. */
  --q-on-bg: #0f1b3d;
  --q-on-ink: #ffd23f;
  --q-brand-bg: #0f1b3d;
  --q-brand-ink: #ffffff;

  /* typographie — Bungee en enseigne, Rubik en texte.
     Bungee porte ses capitales très haut et très large : 1,5 rem s'y lit
     comme un titre de 2 rem ailleurs. Une seule graisse, d'où le poids 400. */
  --q-font-display: 'Bungee', 'Bricolage Grotesque', system-ui, sans-serif;
  --q-font-title: 'Rubik', 'Inter', system-ui, -apple-system, sans-serif;
  --q-font-body: 'Rubik', 'Inter', system-ui, -apple-system, sans-serif;
  --q-display-weight: 400;
  --q-display-size: 1.5rem;
  --q-display-tracking: 0.01em;

  /* formes — arrondi franc, contour épais, et l'inclinaison ludique d'une
     carte qu'on vient de poser. */
  --q-radius: 14px;
  --q-radius-sm: 10px;
  --q-radius-pill: 999px;
  --q-border-width: 3px;
  --q-tilt: -1.5deg;

  /* profondeur — des ombres DURES décalées, jamais un flou : c'est ce qui
     fait l'objet découpé. Plus courtes sur les petits éléments. */
  --q-shadow: 6px 6px 0 #0f1b3d;
  --q-shadow-sm: 4px 4px 0 #0f1b3d;
  --q-glow: 4px 4px 0 #3a47ff;

  /* densité */
  --q-gap: 20px;
  --q-gap-sm: 10px;
  --q-pad: 20px;
  --q-pad-sm: 12px;

  /* mouvement — un rebond léger : le jeu est un jouet, pas une console. */
  --q-motion-fast: 140ms;
  --q-motion-slow: 480ms;
  --q-ease: cubic-bezier(0.2, 0.9, 0.3, 1.25);
}