/* Design system Tastellers — SOURCE UNIQUE DE VERITE des jetons, côté pages réelles.

   Source : app/views/mockups/shared/_design_tokens.html.erb (la référence validée
   avec la cliente). Les valeurs ci-dessous en sont la copie EXACTE : gold 50→800,
   gold-primary / gold-deep, les 3 gradients, l'encre sur gold, l'échelle de neutres,
   le vert de succès, l'échelle d'espacement, les rayons et la transition standard.
   Si une valeur doit changer, elle change d'abord dans le partial de maquette, puis ici.

   Pourquoi ce fichier existe : le produit compte 58 feuilles de style pour ~18 000
   lignes, dont 46 redéfinissent leurs propres couleurs en dur. On mesurait 9 variantes
   du même doré en circulation (#C4A559, #A38543, #D4BC7A, #BFA15C, #A8893C, #CDB563,
   #B19136, #B8994F, #E2BD74) et 4 variantes de l'encre sur doré. Chaque dérive
   correspondait à un ticket client. Les nouvelles feuilles consomment ces jetons ;
   les anciennes seront migrées une par une (voir test/assets/design_tokens_test.rb).

   Règle de marque : tout texte posé sur un fond doré est BLANC, avec une ombre de
   lisibilité (--on-gold / --on-gold-shadow). Seule exception validée (retour Tatianna
   #2619) : le badge « Vérifié », qui reste en écriture foncée sur fond doré.

   Chargé partout via `stylesheet_link_tag :app` (Propshaft sert tout le dossier
   app/assets, cf. ApplicationHelper#app_stylesheets_paths). */

:root {
  /* ── Gold : échelle 50 → 800 (valeur canonique unique) ── */
  --gold-50:#FBF7EE;
  --gold-100:#F4EBD2;
  --gold-200:#E6D5A4;
  --gold-300:#D0B87E;
  --gold-400:#BFA15C;
  --gold-500:#A38543;
  --gold-600:#8A6F37;
  --gold-700:#6E582C;
  --gold-800:#4A3C1E;
  --gold-primary:#C4A559;   /* gold vif de marque (accents, gradients) */
  --gold-deep:#8A6B1F;      /* gold profond (fills contrastés) */

  /* ── Gradients gold (définis 1 fois) ── */
  --gold-text-grad: linear-gradient(100deg,#C4A559,#E5D4A0,#A38543);                             /* titres / mots en gold */
  --gold-fill: linear-gradient(135deg,#C4A559 0%,#D4BC7A 40%,#E5D4A0 70%,#EFE2B8 100%);          /* fond des CTA / pills */
  --gold-fill-deep: linear-gradient(135deg,#8A6B1F 0%,#A38543 38%,#C4A559 70%,#CDB264 100%);     /* fond gold profond */

  /* ── Texte sur gold : BLANC partout (décision client) + ombre de lisibilité ── */
  --on-gold:#FFFFFF;
  --on-gold-shadow: 0 1px 2px rgba(60,44,10,.45);

  /* ── Neutres ── */
  --n-0:#FFFFFF;
  --n-50:#FAFAF8;
  --n-100:#F4F2EE;
  --n-200:#E5E2DC;
  --n-300:#C9C5BC;
  --n-400:#A8A399;
  --n-500:#8A857A;
  --n-700:#4A4640;
  --n-900:#2C2C2C;
  --ink:#1A1614;   /* texte quasi-noir (sur fond clair) */

  /* ── Vert de succès (unique) ── */
  --green:#1B7A4E;
  --green-50:#EAF4EE;
  --green-200:#BFE0CC;

  /* ── Rouge de refus (unique) ──
     Le refus (« Décliner », menu danger, erreur destructive) n'avait pas de
     jeton : chaque feuille écrivait le sien. On en comptait 4 en circulation
     (#B0432F, #B23A2E, #B8322B, #B4442F), dont deux sur le MÊME écran
     (« Candidatures reçues » : la carte en #B0432F, l'aperçu latéral en
     #B23A2E). La valeur canonique retenue est celle de la carte,
     recruiter_applications.css, l'écran de référence de ce parcours. */
  --red:#B0432F;
  --red-50:#FBF4F1;
  --red-200:#F0D9D1;

  /* ── Encre et filet des APERÇUS LATÉRAUX ──
     L'aperçu talent (`.ts-page`, recruiter_talent_search.css) et l'aperçu d'une
     candidature (`.ra-overlay`) doivent rester identiques : c'est la demande
     #3191, « reprendre les mêmes codes graphiques que les autres aperçus ».
     Tant que chacun écrivait sa propre copie des cinq valeurs, la parité ne
     tenait qu'à ce que personne ne modifie l'une des deux. Une définition, deux
     consommateurs.

     Ces trois-là sont des variantes tièdes des jetons de base (--ink #1A1614,
     --n-200 #E5E2DC, --green #1B7A4E). Les replier dessus repeindrait un écran
     déjà validé par la cliente : c'est un arbitrage à lui soumettre, pas une
     correction à passer en silence. */
  --preview-ink:#1E1C18;
  --preview-line:#E8E2D6;
  --preview-success:#2D7A4F;

  /* ── Ambre sémantique (arbitrage Loïc 06/08) ──
     Distinct du doré de marque : l'ambre porte un SENS (état intermédiaire),
     là où le doré porte l'identité. Sans ce jeton, la migration ramenait ces
     états sur le doré et les rendait indistinguables d'un élément décoratif.
     Usages : disponibilité « sous 2 semaines », visibilité « ouvert aux
     opportunités », fiabilité moyenne. */
  --amber:#B0741E;
  --amber-strong:#9A6A1E;
  --amber-bright:#F5B301;
  --amber-fill:linear-gradient(135deg,#F6C453 0%,#E0A52E 100%);
  --amber-50:#FBF1E5;
  --amber-200:#F0DCC2;

  /* ── Espacement ── */
  --sp-1:4px;  --sp-2:8px;   --sp-3:12px;  --sp-4:16px;  --sp-5:20px;
  --sp-6:24px; --sp-8:32px;  --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* ── Rayons ── */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:20px;
  --r-pill:999px;

  /* ── Transition standard ── */
  --t: .18s ease;
}

/* ── Utilitaires « définis 1 fois » (repris de _design_tokens.html.erb) ── */

/* Texte en dégradé gold (anti-crop de la dernière lettre intégré) */
.ds-gold-text {
  background: var(--gold-text-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display: inline-block; padding-right: .14em; margin-right: -.14em;
}

/* Fond gold + texte blanc (CTA, pill, badge) */
.ds-gold-fill {
  background: var(--gold-fill);
  color: var(--on-gold);
  text-shadow: var(--on-gold-shadow);
}
.ds-gold-fill * { color: var(--on-gold); }

/* Garde-fou : plusieurs pages posent un reset `.page-x a { color: inherit }`
   qui, à specificité égale, reprend la main sur un CTA doré et le repasse en
   écriture foncée. La classe doublée passe devant sans !important. */
.ds-btn-gold.ds-btn-gold {
  color: var(--on-gold);
  text-shadow: 0 1px 1px rgba(0,0,0,.15);
}