/* Fichier généré par scripts/build.mjs — ne pas éditer à la main.
   Modifier les sources dans tokens/, puis relancer « npm run build ». */

/* ── Skin « suisse clair » — le défaut du système ─────────────────────────
   Rigueur et grille : la hiérarchie vient du filet et du vide, jamais de
   l'ombre. Aucune couleur identitaire ici — elle arrive par --brand.
   Seuls les neuf tokens d'état portent de la couleur.
   Toutes les valeurs de contraste sont vérifiées par skin-conformity.test.js.
   ───────────────────────────────────────────────────────────────────────── */
[data-skin="suisse-clair"] {
  /* Fonds — gris professionnels, 13/09/2026 (Grégory : « trop clair, du gris
     professionnel sur les cartes »). La page n'est plus blanche, la carte est
     un cran plus foncée qu'elle et se décolle par un filet et une ombre
     minime ; le creux (champs, zones en retrait) un cran de plus. */
  --bg-page: #f3f4f7;
  --bg-raised: #e6e8ed;
  --bg-sunken: #dcdfe6;
  --bg-inverse: #111318;

  /* Texte — gris légèrement froids, jamais un bleu franc : deux teintes
     voisines posées l'une sur l'autre se disputent et donnent l'aspect
     « thème générique ». */
  --text-strong: #0b0d12;
  --text: #23262e;
  --text-muted: #5c6270;
  --text-faint: #7f858f;
  --text-on-inverse: #f4f5f7;

  --rule: #c9cdd6;
  --rule-strong: #aab0bc;
  --border-width: 1px;

  /* Forme — les rayons du cyberpunk (13/09/2026, Grégory : « des cartes à bord
     arrondi comme dans le skin cyberpunk »), une ombre de carte à peine là,
     juste pour la décoller du gris de la page. L'ombre franche reste réservée
     à ce qui flotte réellement au-dessus : les modales. */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --shadow-raised: 0 1px 2px rgba(11, 13, 18, 0.06);
  --shadow-overlay: 0 8px 24px rgba(11, 13, 18, 0.12);
  --blur-surface: none;

  /* Typographie — une seule famille. Le style suisse tire sa hiérarchie du
     contraste de graisse et de taille, pas de l'alternance de familles. */
  --font-body: Inter, system-ui, sans-serif;
  --font-display: Inter, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --size-xs: 0.75rem;
  --size-sm: 0.875rem;
  --size-md: 1rem;
  --size-lg: 1.25rem;
  --size-xl: clamp(1.5rem, 2.5vw, 1.75rem);
  --size-2xl: clamp(1.75rem, 4vw, 2.75rem);
  --size-3xl: clamp(2.5rem, 7vw, 5.5rem);
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-strong: 700;
  --leading-tight: 1.2;
  --leading-normal: 1.6;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* États — les seules couleurs du skin. Assombries par rapport aux teintes
     vives habituelles pour rester lisibles en texte sur fond blanc. */
  --ok: #0e7a5f;
  --ok-soft: #e6f4ef;
  --ok-ink: #063d2f;
  --warn: #8a5a00;
  --warn-soft: #fdf3e0;
  --warn-ink: #4a3000;
  --danger: #b42318;
  --danger-soft: #fdece9;
  --danger-ink: #5f1410;

  --ease: cubic-bezier(0.2, 0, 0.13, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
}

/* ── Skin « suisse sombre » ───────────────────────────────────────────────
   Mêmes formes que le suisse clair, fonds inversés. Ce n'est PAS le dark
   space historique : ni bleu nuit, ni dégradé radial, ni halo.
   ───────────────────────────────────────────────────────────────────────── */
[data-skin="suisse-sombre"] {
  /* Fonds — 13/09/2026, même geste que le clair (Grégory) : la carte est un gris
     anthracite nettement posé sur la page, le creux un cran plus sombre. */
  --bg-page: #15171c;
  --bg-raised: #22252c;
  --bg-sunken: #0f1115;
  --bg-inverse: #f4f5f7;

  --text-strong: #f5f6f8;
  --text: #d5d8de;
  --text-muted: #8b919d;
  --text-faint: #6a707d;
  --text-on-inverse: #14171f;

  --rule: #333843;
  --rule-strong: #4a5060;
  --border-width: 1px;

  /* Forme — rayons du cyberpunk, ombre de carte discrète (13/09/2026). */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --shadow-raised: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.55);
  --blur-surface: none;

  --font-body: Inter, system-ui, sans-serif;
  --font-display: Inter, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --size-xs: 0.75rem;
  --size-sm: 0.875rem;
  --size-md: 1rem;
  --size-lg: 1.25rem;
  --size-xl: clamp(1.5rem, 2.5vw, 1.75rem);
  --size-2xl: clamp(1.75rem, 4vw, 2.75rem);
  --size-3xl: clamp(2.5rem, 7vw, 5.5rem);
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-strong: 700;
  --leading-tight: 1.2;
  --leading-normal: 1.6;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* États — éclaircis par rapport au skin clair : sur fond sombre, ce sont les
     teintes vives qui deviennent lisibles et les teintes profondes qui
     disparaissent. Les fonds -soft sont des hex opaques, pas des rgba : le
     test de contraste doit pouvoir les lire. */
  --ok: #35c79a;
  --ok-soft: #10231d;
  --ok-ink: #d7f5ec;
  --warn: #e0a33a;
  --warn-soft: #241a08;
  --warn-ink: #f7e6c8;
  --danger: #f2726a;
  --danger-soft: #2a1210;
  --danger-ink: #fbdedb;

  --ease: cubic-bezier(0.2, 0, 0.13, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
}

/* ── Skin « cyberpunk » ───────────────────────────────────────────────────
   Le style historique, conservé. Seul skin où les surfaces sont floutées et
   où les rayons sont généreux.
   L'amber #f59e0b d'origine n'est pas repris : c'était la couleur identitaire,
   elle passe désormais par --brand. Un projet qui veut son amber le déclare
   dans son fichier de marque.
   ───────────────────────────────────────────────────────────────────────── */
[data-skin="cyberpunk"] {
  --bg-page: #050914;
  --bg-raised: #0f172a;
  --bg-sunken: #030610;
  --bg-inverse: #f1f5f9;

  --text-strong: #ffffff;
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  --text-faint: #64748b;
  --text-on-inverse: #0f172a;

  --rule: #1b2437;
  --rule-strong: #2b3448;
  --border-width: 1px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --shadow-raised: 0 12px 40px rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 20px 60px rgba(0, 0, 0, 0.75);
  --blur-surface: blur(18px) saturate(180%);

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --size-xs: 0.75rem;
  --size-sm: 0.875rem;
  --size-md: 1rem;
  --size-lg: 1.3rem;
  /* Échelle plus généreuse que les skins suisses, comme elle l'a toujours été
     (1,9 / 2,6 / 3,6 rem à l'origine) : la typographie fait partie du style
     historique qu'on s'est engagé à conserver. Seule la fluidité est nouvelle. */
  --size-xl: clamp(1.6rem, 2.7vw, 1.9rem);
  --size-2xl: clamp(1.9rem, 4.3vw, 3rem);
  --size-3xl: clamp(2.7rem, 7.5vw, 6rem);
  --weight-normal: 400;
  --weight-medium: 600;
  --weight-strong: 900;
  --leading-tight: 1.1;
  --leading-normal: 1.7;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 100px;

  --ok: #10b981;
  --ok-soft: #06231a;
  --ok-ink: #d1fae5;
  --warn: #f59e0b;
  --warn-soft: #2a1c02;
  --warn-ink: #fef3c7;
  --danger: #ef4444;
  --danger-soft: #2b0e0e;
  --danger-ink: #fee2e2;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration: 250ms;
}

/* ── Marque « Clara » — bleu #2563eb ──────────────────────────────────────
   Une valeur par famille de fond, pas une valeur unique : #2563eb atteint
   5,17:1 sur blanc mais tombe à 3,71:1 sur #0d0f14 et 3,85:1 sur #050914.
   Les skins sombres reçoivent donc la variante éclaircie #6b9dff.
   Ce fichier aligne au passage l'app (historiquement amber) sur la landing.
   ───────────────────────────────────────────────────────────────────────── */
[data-brand="clara"][data-skin="suisse-clair"] {
  /* 13/09/2026 : les cartes du skin clair sont passées au gris (#e6e8ed) ; le bleu
     #2563eb n'y tenait plus le seuil AA (4,22:1), #1d4ed8 le tient (5,47:1). */
  --brand: #1d4ed8;
  --brand-strong: #1e40af;
  --brand-soft: #eef3fe;
  --text-on-brand: #ffffff;
}

[data-brand="clara"][data-skin="suisse-sombre"] {
  --brand: #6b9dff;
  --brand-strong: #8fb4ff;
  --brand-soft: #101a2e;
  --text-on-brand: #0d0f14;
}

[data-brand="clara"][data-skin="cyberpunk"] {
  --brand: #6b9dff;
  --brand-strong: #8fb4ff;
  --brand-soft: #0b1526;
  --text-on-brand: #050914;
}