/* ==========================================================================
   Mon Saju — jetons de design UNIQUES (site + rapport)
   public/css/tokens.css · SEULE source des couleurs, tailles, rayons, ombres.

   Repris de design/maquettes/site/tokens.css (+ couche Rapport de
   design/maquettes/rapport/tokens.css). Aucune valeur hexadécimale n'est
   admise ailleurs dans public/css/** (test/l9-tokens.test.js).

   Ordre de chargement de chaque page : fonts.css → tokens.css → base.css →
   composants → feuille de page (css/pages/*.css).

   Thème : posé par theme-init.js sur <html> ET <body> (data-theme="light|dark").
   Les sélecteurs [data-theme="…"] sans élément valent donc partout.

   Arbitrage du vermillon (docs/PLAN-UX.md § 3.1) — en sombre, le Site utilise
   --accent comme FOND des boutons et le Rapport comme TEXTE. On distingue :
     --accent       vermillon de marque pour le TEXTE et les TRAITS ;
     --accent-fill  FOND des boutons pleins (blanc dessus ≥ 5:1) ;
     --accent-ink   vermillon pour le texte fin sur papier (clair : #a8352f,
                    5,6:1 ; la valeur de --accent ferait 4,4:1 sur --paper-2) ;
     --accent-hover survol d'un bouton plein.

   Contrastes WCAG 2.1 calculés sur --paper (clair) et --paper (sombre) sauf
   mention. Cible AA : 4,5:1 texte courant, 3:1 grand texte et composants.
   Les paires sont vérifiées par test/l9-tokens.test.js.

   CONVENTIONS PARTAGÉES (site ET rapport) :
   1. Écriture : hangul glyphe principal (갑), hanja en petit (甲), romanisation
      en Geist (Gap). Uniquement les glyphes du sous-ensemble Noto Serif KR.
   2. Ordre des piliers : Année → Mois → Jour → Heure, partout.
   3. La couleur d'élément désigne TOUJOURS un élément, jamais une position.
      Le vermillon est la marque et les actions ; le Feu est un orange minium.
   4. Lexique : « Maître du Jour » (jamais « Day Master » ni « Ilju »).
   ========================================================================== */

:root {
  /* ---------- Familles -------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-ui: "Geist", "Segoe UI", system-ui, sans-serif;
  --font-ko: "Noto Serif KR", "Cormorant Garamond", serif;

  /* ---------- Échelle typographique (mobile → desktop via clamp) -------- */
  --fs-display: clamp(2.75rem, 1.6rem + 4.9vw, 5.75rem);   /* H1 44 → 92 */
  --fs-h1: clamp(2.375rem, 1.7rem + 2.9vw, 4rem);          /* 38 → 64 */
  --fs-h2: clamp(2rem, 1.55rem + 1.9vw, 3.25rem);          /* 32 → 52 */
  --fs-h3: clamp(1.5rem, 1.35rem + .6vw, 1.875rem);        /* 24 → 30 */
  --fs-h4: 1.25rem;                                        /* 20 (Cormorant 600) */
  --fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.3125rem);    /* 17 → 21 */
  --fs-read: clamp(1.25rem, 1.2rem + .2vw, 1.375rem);      /* lecture Cormorant 20 → 22 */
  --fs-body: 1rem;                                         /* 16 */
  --fs-small: .875rem;                                     /* 14 */
  --fs-meta: .8125rem;                                     /* 13 — minimum absolu */
  --fs-kicker: .75rem;                                     /* 12, capitales, +0.16em */
  --fs-price: clamp(3rem, 2.6rem + 1.6vw, 3.75rem);        /* 48 → 60 */

  --lh-tight: 1.02;
  --lh-title: 1.12;
  --lh-body: 1.55;
  --lh-read: 1.62;
  --tracking-kicker: .16em;

  /* ---------- Espacements (base 4) -------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px;
  --sp-11: 80px; --sp-12: 112px;
  --gutter: clamp(16px, 4vw, 56px);       /* 16 px à 390 : cartes de 358 px */
  --section-y: clamp(64px, 9vw, 128px);
  --measure: 34rem;                       /* ≈ 62–68 caractères en Geist 16 */
  --measure-read: 31rem;                  /* ≈ 60 caractères en Cormorant 20 */
  --canvas: 1200px;

  /* ---------- Rayons : 3 valeurs ---------------------------------------- */
  --r-sm: 8px;      /* champs, chips, petites cartes */
  --r-md: 14px;     /* cartes, feuilles, encarts */
  --r-pill: 999px;  /* boutons, segments */

  /* ---------- Contrôles (cibles ≥ 48 px) -------------------------------- */
  --h-field: 52px;
  --h-btn: 56px;     /* CTA principal */
  --h-btn-sm: 48px;  /* barre collante, secondaires */

  /* ---------- Mouvement ------------------------------------------------- */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-stamp: cubic-bezier(.3, 1.4, .5, 1);   /* « coup de sceau » léger */
  --t-fast: 140ms;  --t-base: 220ms;  --t-slow: 420ms;  --t-reveal: 700ms;

  /* ---------- Lecture longue du rapport (couche Rapport) ---------------- */
  --rd-size: 19.5px;     /* ≈ 46 car./ligne pleine à 390 px */
  --rd-lh: 1.68;
  --rd-lead: 23px;       /* phrase-clé en exergue */

  /* ---------- Constantes indépendantes du thème ------------------------- */
  /* Bouton clair posé sur un bloc encre (identique dans les deux thèmes). */
  --btn-light-bg: #f3ede0;
  --btn-light-ink: #211a14;
  --btn-light-hover: #fffaf2;
  /* Couverture-objet (mini-couverture de l'offre, couverture du rapport) :
     papier et encre identiques dans les deux thèmes (c'est un objet). */
  --cover-paper: #f7f1e5;
  --cover-edge: #e0d4bf;
  --cover-ink: #211a14;
  --cover-ink-2: #5a4e44;
  --cover-shadow: rgba(40, 20, 10, .5);
  /* Surlignage d'un champ « À COMPLÉTER… » des pages légales (build:legal) :
     repérage de chantier, volontairement hors charte, identique dans les deux thèmes. */
  --todo-bg: #ffe14d;
  --todo-ink: #1a1300;
  --todo-line: #c0392b;
  /* Éléments dessinés sur fond vermillon / pigment. */
  --on-accent-track: rgba(255, 255, 255, .35);   /* piste du spinner */
  --on-seal-ring: rgba(255, 255, 255, .18);      /* double filet du sceau */
}

/* ==========================================================================
   THÈME CLAIR « papier » (par défaut)
   ========================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Fonds */
  --paper: #f3ede0;
  --paper-2: #ece4d5;        /* section alternée */
  --surface: #fbf6ec;        /* carte */
  --surface-2: #fffaf2;      /* carte surélevée, feuille, champs */
  --sunk: #e6dccb;           /* creux : piste de progression, squelettes */
  --ink-block: #0b1a35;      /* bloc encre (révélation, CTA final) dans les 2 thèmes */

  /* Texte */
  --ink: #211a14;            /* 14,7:1 */
  --ink-2: #5a4e44;          /* 6,9:1 */
  --ink-3: #6f6358;          /* 5,0:1 (4,6 sur --paper-2) */
  --ink-on-accent: #ffffff;  /* 5,5:1 sur --accent-fill */
  --on-pigment: #ffffff;     /* texte posé sur un pigment plein (cercle du Maître du Jour) */

  /* Lignes */
  --line: rgba(110, 84, 60, .22);
  --line-soft: rgba(110, 84, 60, .12);
  --line-strong: rgba(110, 84, 60, .38);
  --field-border: #94846f;   /* 3,5:1 sur --surface-2 (composant ≥ 3:1) */

  /* Marque */
  --accent: #b93d38;         /* texte et traits (4,75:1 sur --paper) */
  --accent-ink: #a8352f;     /* texte fin : 5,6:1 */
  --accent-fill: #b93d38;    /* fond des boutons pleins : blanc dessus 5,5:1 */
  --accent-hover: #91342e;
  --accent-soft: #f2dcd6;    /* fond d'alerte douce, coche */
  --focus: #2c4a6b;          /* anneau de focus : Eau, 7,8:1 */
  --success: #3f6b4a;        /* = Bois */

  /* Ombres — la marque préfère les filets ; ombres réservées aux couches */
  --shadow-1: 0 1px 0 rgba(60, 40, 20, .05), 0 1px 3px rgba(60, 40, 20, .06);
  --shadow-2: 0 14px 36px -12px rgba(60, 40, 20, .22);
  --shadow-sticky: 0 -10px 30px -8px rgba(40, 28, 16, .18);
  --shadow-cta: 0 10px 22px -10px rgba(145, 52, 46, .55);

  /* Texture papier */
  --speck-1: rgba(126, 96, 64, .09);
  --speck-2: rgba(126, 96, 64, .07);
  --fiber: rgba(126, 96, 64, .025);

  /* Sceau (rapport) : encre vermillon, caractères papier */
  --seal: #b93d38;
  --on-seal: #fbf3e6;
  --grain:
    radial-gradient(circle at 18% 12%, rgba(185, 140, 90, 0.08), transparent 42%),
    radial-gradient(circle at 86% 78%, rgba(185, 61, 56, 0.05), transparent 46%);

  /* ---------- 5 éléments : pigments (encres et minéraux) -----------------
     --x      : glyphes, pastilles, traits (≥ 3:1 sur papier)
     --x-ink  : texte courant coloré (≥ 4,5:1 sur papier ET surface)
     --x-soft : fonds teintés (--ink dessus ≥ 12:1) */
  --wood: #3f6b4a;      --wood-ink: #3f6b4a;   --wood-soft: #e1e8db;   /* 5,3:1 */
  --fire: #b5541f;      --fire-ink: #9a4519;   --fire-soft: #f4e0d2;   /* 4,2 / 5,6:1 */
  --earth: #9c7a35;     --earth-ink: #7d6128;  --earth-soft: #efe4c8;  /* 3,4 / 5,0:1 */
  --metal: #6c7480;     --metal-ink: #5b636e;  --metal-soft: #e3e4e4;  /* 4,1 / 5,2:1 */
  --water: #2c4a6b;     --water-ink: #2c4a6b;  --water-soft: #dae2ea;  /* 7,8:1 */
}

/* ==========================================================================
   THÈME SOMBRE « encre de nuit »
   Appliqué par data-theme="dark" ; theme-init.js le pose aussi quand le système
   est sombre et que l'utilisateur n'a rien choisi.
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --paper: #071631;
  --paper-2: #0c1f42;
  --surface: #10244a;
  --surface-2: #142b55;
  --sunk: #0a1a38;
  --ink-block: #040d20;

  --ink: #ece8de;            /* 14,7:1 */
  --ink-2: #c4c3bf;          /* 10:1 */
  --ink-3: #9ca3ae;          /* 7,1:1 (5,9 sur surface) */
  --ink-on-accent: #ffffff;
  --on-pigment: #071631;     /* pigments clairs : texte nuit dessus */

  --line: rgba(159, 188, 219, .22);
  --line-soft: rgba(159, 188, 219, .12);
  --line-strong: rgba(159, 188, 219, .40);
  --field-border: #6a7fa0;   /* 3,4:1 sur --surface-2 */

  --accent: #e57a74;         /* texte et traits : 6,3:1 (4,9 sur surface-2) */
  --accent-ink: #e57a74;
  --accent-fill: #b9443f;    /* fond des boutons : blanc dessus 5,3:1 */
  --accent-hover: #a53a35;
  --accent-soft: rgba(224, 113, 107, .14);
  --focus: #93b6dd;
  --success: #8fbf9c;

  --shadow-1: 0 1px 0 rgba(0, 0, 0, .25);
  --shadow-2: 0 18px 40px -14px rgba(0, 4, 14, .65);
  --shadow-sticky: 0 -12px 30px -8px rgba(0, 4, 14, .7);
  --shadow-cta: 0 10px 24px -10px rgba(0, 0, 0, .6);

  --speck-1: rgba(236, 232, 222, .05);  /* « étoiles » */
  --speck-2: rgba(236, 232, 222, .035);
  --fiber: transparent;

  --seal: #b9443f;
  --on-seal: #fbefe6;
  --grain:
    radial-gradient(1px 1px at 12% 18%, rgba(236, 232, 222, 0.5), transparent 60%),
    radial-gradient(1px 1px at 72% 9%, rgba(236, 232, 222, 0.35), transparent 60%),
    radial-gradient(1px 1px at 42% 64%, rgba(236, 232, 222, 0.3), transparent 60%),
    radial-gradient(1px 1px at 88% 46%, rgba(236, 232, 222, 0.4), transparent 60%),
    radial-gradient(circle at 80% 0%, rgba(143, 180, 220, 0.1), transparent 45%);

  /* Pigments éclaircis (même teinte, valeur montée) : tous ≥ 7:1 sur --paper */
  --wood: #8fbf9c;   --wood-ink: #8fbf9c;   --wood-soft: rgba(143, 191, 156, .14);
  --fire: #e59a72;   --fire-ink: #e59a72;   --fire-soft: rgba(229, 154, 114, .14);
  --earth: #d6b36c;  --earth-ink: #d6b36c;  --earth-soft: rgba(214, 179, 108, .14);
  --metal: #b2bac6;  --metal-ink: #b2bac6;  --metal-soft: rgba(178, 186, 198, .13);
  --water: #93b6dd;  --water-ink: #93b6dd;  --water-soft: rgba(147, 182, 221, .14);
}

/* Les blocs « encre » (révélation, CTA final, en-tête d'e-mail) gardent des
   valeurs sombres quel que soit le thème. */
.on-ink {
  --ink: #ece8de;
  --ink-2: #c4c3bf;
  --ink-3: #9ca3ae;
  --line: rgba(159, 188, 219, .22);
  --line-soft: rgba(159, 188, 219, .12);
  --line-strong: rgba(159, 188, 219, .40);
  --accent: #e57a74;
  --accent-ink: #e57a74;
  --accent-fill: #b9443f;
  --accent-hover: #a53a35;
  --surface: #10244a;
  --wood: #8fbf9c; --fire: #e59a72; --earth: #d6b36c; --metal: #b2bac6; --water: #93b6dd;
  --wood-ink: #8fbf9c; --fire-ink: #e59a72; --earth-ink: #d6b36c; --metal-ink: #b2bac6; --water-ink: #93b6dd;
  color: var(--ink);
}