/* ------------------------------------------------------------------
   tokens.css — valeurs de design du site Veranacustom

   Extraites de design/TattooYourShoes.dc.html (CLAUDE.md §9). Aucune
   valeur n'est inventée : chacune vient de la maquette, à l'exception
   des paires de contraste qui échouaient au seuil AA de 4.5:1 et qui
   ont été corrigées avant d'être figées, comme le §9 l'exige. Chaque
   correction porte en commentaire son ratio avant → après.

   Règle : aucun autre fichier du projet ne contient de valeur
   littérale. Couleur, taille, espacement, rayon, durée se prennent
   ici. Une valeur en dur ailleurs est un bug.
   ------------------------------------------------------------------ */

:root {
  color-scheme: light;

  /* ================= COULEURS DE RÔLE ================= */

  --fond:            #FFF8EE;  /* crème, fond de page */
  --fond-doux:       #FFFCF6;  /* footer */
  --fond-carte:      #FFFFFF;
  --fond-media:      #FBF1E1;  /* derrière une image en cours de chargement */

  --texte:           #17130F;  /* 17.52:1 sur --fond */
  --texte-doux:      #6B615A;  /*  5.72:1 sur --fond */
  --texte-meta:      #7A7069;  /* corrigé : #9C9086 échouait à 2.95:1 → 4.58:1 */

  --bordure:         #F0E4D2;
  --bordure-forte:   #E7DAC7;
  --marque:          #E01B24;  /*  4.58:1 sur --fond */

  /* Surfaces sombres */
  --fond-nuit:       #17130F;
  --texte-sur-nuit:  #D9D0E4;  /* 12.40:1 */
  --texte-sur-metal: #D7CBCB;

  /* ================= PALETTE ARC-EN-CIEL =================
     Les sept teintes de la maquette, employées en aplats, badges,
     accents de section et dégradé de titre. */

  --rose:      #FF4D8D;
  --orange:    #FF8A3D;
  --jaune:     #FFCC2E;
  --vert:      #37C871;
  --turquoise: #17BEBB;
  --bleu:      #3B82F6;
  --violet:    #8E61F6;  /* corrigé : #8B5CF6 plafonnait à 4.36:1 avec du
                            texte foncé. Éclairci de 3 % → 4.57:1. Écart
                            invisible à l'œil, teinte inchangée. */

  /* ---- Texte POSÉ SUR un aplat de la palette ----
     Le blanc échoue sur les sept teintes (de 1.51:1 sur le jaune à
     4.23:1 sur le violet). Le texte foncé passe partout. D'où la règle :
     sur une teinte de la palette, le texte est foncé, jamais blanc. */

  --sur-rose:      #17130F;  /*  5.89:1 */
  --sur-orange:    #17130F;  /*  7.88:1 */
  --sur-jaune:     #17130F;  /* 12.26:1 */
  --sur-vert:      #17130F;  /*  8.50:1 */
  --sur-turquoise: #17130F;  /*  8.02:1 */
  --sur-bleu:      #17130F;  /*  5.02:1 */
  --sur-violet:    #17130F;  /*  4.57:1 */

  /* ---- La teinte employée COMME TEXTE sur le crème ----
     Les teintes pures y échouent toutes (1.43:1 à 4.02:1). Versions
     assombries au strict nécessaire pour atteindre 4.5:1. */

  --rose-texte:      #C93D6F;  /* 2.97 → 4.55:1 */
  --orange-texte:    #AD5E29;  /* 2.22 → 4.52:1 */
  --jaune-texte:     #8A6E19;  /* 1.43 → 4.60:1 */
  --vert-texte:      #248249;  /* 2.06 → 4.56:1 */
  --turquoise-texte: #0F7F7D;  /* 2.18 → 4.58:1 */
  --bleu-texte:      #3370D4;  /* 3.49 → 4.52:1 */
  --violet-texte:    #8156E5;  /* 4.02 → 4.53:1 */

  /* ---- Trios doux : fond clair, bordure, texte ----
     Cartouches, pastilles de section, encarts. */

  --doux-ambre-fond:    #FFEFD9;
  --doux-ambre-bordure: #F3DFBE;
  --doux-ambre-texte:   #AF5500;  /* corrigé : #C25E00 → 3.80 puis 4.51:1 */

  --doux-bleu-fond:     #E7F0FF;
  --doux-bleu-bordure:  #CFE0FA;
  --doux-bleu-texte:    #2C63C4;  /* 4.96:1 — conservé tel quel */

  --doux-vert-fond:     #E6F9EE;
  --doux-vert-bordure:  #C8EED8;
  --doux-vert-texte:    #188049;  /* corrigé : #1E9E5A → 3.14 puis 4.53:1 */

  --doux-violet-fond:   #EFE8FF;
  --doux-violet-bordure:#DCD0FA;
  --doux-violet-texte:  #6D3FD1;  /* 5.38:1 — conservé tel quel */

  --doux-rose-fond:     #FFF3F8;

  /* ================= DÉGRADÉS ================= */

  --grad-accent: linear-gradient(90deg, var(--rose), var(--orange), var(--jaune),
                                        var(--vert), var(--turquoise), var(--bleu), var(--violet));
  --grad-marque: linear-gradient(120deg, var(--rose), var(--violet));
  --grad-halo:   linear-gradient(135deg, #FFE0EC, #E6F7FF);  /* cartouche du hero */
  --grad-nuit:   linear-gradient(120deg, #17130F, #3A2B4D);  /* bloc Instagram */
  --grad-metal:  linear-gradient(120deg, #17130F, #3A1214);  /* bloc « metal extrême » */

  /* ================= TYPOGRAPHIE ================= */

  --police-titre: 'Fredoka', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --police-corps: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --g-normal: 400;
  --g-moyen:  500;
  --g-demi:   600;
  --g-gras:   700;
  --g-extra:  800;

  --t-hero:     clamp(38px, 6vw,    66px);
  --t-page:     clamp(32px, 5vw,    54px);
  --t-section:  clamp(26px, 4vw,    42px);
  --t-bloc:     clamp(24px, 3.4vw,  38px);
  --t-titre3:   24px;
  --t-titre4:   19px;
  --t-corps-lg: clamp(17px, 1.35vw, 21px);
  --t-corps:    17px;
  --t-corps-sm: 15.5px;
  --t-meta:     13.5px;
  --t-eyebrow:  13px;
  --t-logo:     clamp(27px, 2.6vw,  36px);
  --t-surtitre: 11px;

  --lh-titre:   1.02;
  --lh-serre:   1.2;
  --lh-compact: 1.5;
  --lh-corps:   1.6;

  --ls-hero:     -1.5px;
  --ls-page:     -1.2px;
  --ls-section:  -1px;
  --ls-eyebrow:   1px;
  --ls-surtitre:  3.2px;

  /* ================= ESPACEMENTS =================
     Échelle relevée dans la maquette. Le suffixe est la valeur en px. */

  --e-4:  4px;   --e-6:  6px;   --e-8:  8px;   --e-10: 10px;
  --e-12: 12px;  --e-14: 14px;  --e-16: 16px;  --e-18: 18px;
  --e-20: 20px;  --e-22: 22px;  --e-24: 24px;  --e-26: 26px;
  --e-30: 30px;  --e-34: 34px;  --e-40: 40px;  --e-44: 44px;
  --e-52: 52px;  --e-56: 56px;

  /* Rythmes fluides */
  --conteneur:     1520px;
  --gouttiere:     clamp(20px, 4vw,   56px);
  /* Rythme vertical ASYMÉTRIQUE, comme la maquette : beaucoup d'air au-dessus
     d'un titre de section, très peu sous le bloc qui le suit. Un padding
     symétrique double l'écart entre deux sections consécutives. */
  --section-y:      clamp(34px, 4vw,   56px);  /* haut, pages intérieures */
  --section-y-lg:   clamp(40px, 4.5vw, 64px);  /* haut, sections d'accueil */
  --section-bas:    20px;                      /* bas, pages intérieures */
  --section-bas-lg: 12px;                      /* bas, sections d'accueil */
  --grille-gap:    clamp(14px, 1.3vw, 22px);
  --grille-gap-lg: clamp(18px, 1.8vw, 30px);

  /* ================= RAYONS ================= */

  --rad-sm:    12px;
  --rad-media: 18px;
  --rad:       22px;
  --rad-lg:    24px;
  --rad-xl:    28px;
  --rad-pill:  999px;

  /* ================= OMBRES ================= */

  --ombre-sm:       0 6px 16px rgba(23, 19, 15, .08);
  --ombre:          0 10px 26px rgba(23, 19, 15, .07);
  --ombre-md:       0 12px 30px rgba(23, 19, 15, .07);
  --ombre-lg:       0 20px 40px rgba(23, 19, 15, .15);
  --ombre-xl:       0 24px 48px rgba(23, 19, 15, .22);
  --ombre-lightbox: 0 30px 60px rgba(0, 0, 0, .5);
  --ombre-marque:   0 12px 26px rgba(255, 77, 141, .28);

  /* ================= FOCUS =================
     §6 : le focus clavier doit rester visible partout. */

  --focus-couleur:  #2C63C4;
  --focus-epaisseur: 3px;
  --focus-ecart:     2px;

  /* ================= MOUVEMENT =================
     Durées du préréglage « Vif » de la maquette. */

  --duree-marquee:          46s;
  --duree-degrade:           7s;
  --duree-flottement:        5s;
  --duree-flottement-lent: 6.5s;
  --duree-oscillation:     3.5s;
  --duree-apparition:      .6s;
  --duree-pop:             .5s;
  --transition:            160ms ease;
}

/* ================= RÉSOLUTION D'UN NOM DE PALETTE =================
   CLAUDE.md §4 : Statut.couleur et Tarif.couleur stockent un NOM
   ("vert", "violet"), jamais un hexadécimal. Le gabarit écrit
   data-couleur="vert" et le CSS fournit ici le couple fond/texte déjà
   validé en contraste — l'éditrice choisit une couleur, jamais un
   couple, et ne peut donc pas créer un badge illisible.

   Un nom absent ou inconnu retombe sur le neutre : un statut mal saisi
   reste lisible plutôt que de casser la page. */

[data-couleur] {
  --c-fond:  var(--bordure-forte);
  --c-texte: var(--texte);
  --c-accent: var(--texte-doux);
  /* Fond clair dérivé de la teinte : un statut ajouté depuis l'interface
     obtient sa version douce sans réglage supplémentaire. */
  --c-doux: color-mix(in srgb, var(--c-fond) 14%, var(--fond-carte));
}
[data-couleur="rose"]      { --c-fond: var(--rose);      --c-texte: var(--sur-rose);      --c-accent: var(--rose-texte); }
[data-couleur="orange"]    { --c-fond: var(--orange);    --c-texte: var(--sur-orange);    --c-accent: var(--orange-texte); }
[data-couleur="jaune"]     { --c-fond: var(--jaune);     --c-texte: var(--sur-jaune);     --c-accent: var(--jaune-texte); }
[data-couleur="vert"]      { --c-fond: var(--vert);      --c-texte: var(--sur-vert);      --c-accent: var(--vert-texte); }
[data-couleur="turquoise"] { --c-fond: var(--turquoise); --c-texte: var(--sur-turquoise); --c-accent: var(--turquoise-texte); }
[data-couleur="bleu"]      { --c-fond: var(--bleu);      --c-texte: var(--sur-bleu);      --c-accent: var(--bleu-texte); }
[data-couleur="violet"]    { --c-fond: var(--violet);    --c-texte: var(--sur-violet);    --c-accent: var(--violet-texte); }

/* ================= MOUVEMENT RÉDUIT =================
   §9 : toutes les animations neutralisées sous prefers-reduced-motion.
   Deux niveaux : les durées passent à zéro pour tout ce qui s'appuie
   sur les tokens, et le garde-fou plus bas rattrape ce qui aurait pu
   être écrit en dur. La marquee redevient une bande que l'on fait
   défiler à la main. */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duree-marquee:         0s;
    --duree-degrade:         0s;
    --duree-flottement:      0s;
    --duree-flottement-lent: 0s;
    --duree-oscillation:     0s;
    --duree-apparition:      0s;
    --duree-pop:             0s;
    --transition:            0s;
  }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}