/* Work & Play — tokens.css, généré depuis le Design System « Work & Play — DS » (mis à jour le 23/10/2026). */
/* Polices : DIN Pro (licence web à acquérir) ; repli Barlow (Google Fonts 400/500/600/800). */

:root {
  /* Couleurs (rôles sémantiques, jamais la couleur brute de la charte dans un composant) */
  --ground-deep: #1B232B;
  --ground-dark: #293540;
  --ground-light: #F3EDDC;
  --ground-paper: #FAF7F0;        /* en-tête, bloc « Développez… », rubrique « Comment ça marche ? » (sol clair n°2, pour alterner avec --ground-light) */
  --surface: #FFFFFF;
  --text-on-dark: #F3EDDC;
  --text-on-dark-muted: #C2BEB2;
  --text-on-light: #293540;
  --text-on-light-muted: #56606D;
  --accent: #BF9C4A;
  --accent-hover: #D4B66E;
  --accent-pressed: #A8873A;
  --on-accent: #1B232B;
  --accent-text-on-light: #7D5F22;
  --line-on-dark: #3D4955;
  --line-on-light: #DDD4BD;
  --control-border-on-dark: #868E9B;
  --control-border-on-light: #8E8670;
  --focus-on-dark: #D4B66E;
  --focus-on-light: #293540;
  --danger: #A3342B;
  --danger-on-dark: #E8907F;
  --success: #2F6B4F;
  --success-on-dark: #7FC3A0;
  --scrim: rgba(27, 35, 43, 0.72);
  --danger-soft: #F7E4DF;          /* fond du récapitulatif d'erreurs, texte --danger dessus (5,5:1) */
  --accent-soft: rgba(191, 156, 74, 0.12); /* fond de la mention « Pas de spam » */
  --overlay: rgba(27, 35, 43, 0.78);     /* voile derrière la fenêtre d'inscription */
  --font-brand: "DIN Pro", Barlow, "Arial Narrow", system-ui, sans-serif;
  /* Espacement (grille 8 pt) */
  --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-24: 96px;
  --space-32: 128px;
  /* Rayons */
  --radius-0: 0px;
  --radius-2: 2px;
  --radius-full: 999px;
  /* Ombres */
  --shadow-none: none;
  --shadow-raise: 0 1px 2px rgba(27, 35, 43, 0.08), 0 12px 32px rgba(27, 35, 43, 0.12);
  --shadow-header: 0 1px 0 rgba(243, 237, 220, 0.08);
  /* Tailles */
  --container-max: 1200px;
  --measure: 560px;
  --target-min: 44px;
  --header-h: 88px;
  --rule-w: 48px;
  /* Mouvement */
  --duration-micro: 120ms;
  --duration-enter: 240ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-micro: 0ms; --duration-enter: 0ms; }
}

/* Styles de texte */
.t-display-xl { font: 800 72px/0.96 var(--font-brand); letter-spacing: 0.005em; text-transform: uppercase; }
.t-display-m { font: 800 44px/0.98 var(--font-brand); text-transform: uppercase; }
.t-h2 { font: 500 44px/50px var(--font-brand); }
.t-h2-m { font: 500 32px/38px var(--font-brand); }
.t-tagline { font: 500 22px/30px var(--font-brand); letter-spacing: 0.04em; text-transform: uppercase; }
.t-h3 { font: 600 18px/24px var(--font-brand); letter-spacing: 0.08em; text-transform: uppercase; }
.t-eyebrow { font: 600 13px/16px var(--font-brand); letter-spacing: 0.14em; text-transform: uppercase; }
.t-body-l { font: 400 18px/28px var(--font-brand); }
.t-body { font: 400 16px/26px var(--font-brand); }
.t-body-s { font: 400 14px/22px var(--font-brand); }
.t-label { font: 600 14px/16px var(--font-brand); letter-spacing: 0.1em; text-transform: uppercase; }
.t-caption { font: 400 12px/16px var(--font-brand); letter-spacing: 0.02em; }