/* ==========================================================================
   DA "Tona" — tokens (source: DESIGN_SYSTEM.md, 2026-07-11)
   Étape 0 du brief d'assemblage. Toute la refonte de la page de vente
   consomme CES variables — aucune couleur/typo hors de ce fichier.
   ========================================================================== */

/* ---- Fontes (auto-hébergées, /assets/fonts) ---- */
@font-face {
  font-family: 'General Sans';
  src: url('/assets/fonts/general-sans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('/assets/fonts/general-sans-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('/assets/fonts/general-sans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('/assets/fonts/general-sans-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/geist-mono-var.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
}

:root {
  /* ---- Fonds ---- */
  --bg: #FAFAF8;          /* fond principal — jamais blanc pur */
  --bg-soft: #F4F2EF;     /* bandes de section alternées */
  --surface: #FFFFFF;     /* cartes, surfaces surélevées */

  /* ---- Dégradé signature (pêche → corail → rose → lavande) ---- */
  --grad-peach: #FFD3A6;
  --grad-coral: #FF9E8A;
  --grad-rose: #F7A9C4;
  --grad-lavender: #C9B8F0;
  --grad-signature: linear-gradient(135deg, var(--grad-peach) 0%, var(--grad-coral) 34%, var(--grad-rose) 66%, var(--grad-lavender) 100%);
  /* mesh hero CSS (fallback mobile de hero-mesh.jpg) */
  --grad-mesh:
    radial-gradient(58% 70% at 12% 18%, rgba(255,211,166,.85), transparent 62%),
    radial-gradient(55% 65% at 78% 12%, rgba(247,169,196,.75), transparent 60%),
    radial-gradient(70% 80% at 85% 82%, rgba(201,184,240,.85), transparent 64%),
    radial-gradient(60% 70% at 28% 88%, rgba(255,158,138,.65), transparent 60%),
    var(--bg);

  /* ---- Encre & texte ---- */
  --ink: #141414;         /* titres, boutons — quasi-noir chaud */
  --body: #4A4A48;
  --muted: #8A8A86;

  /* ---- Accents fonctionnels (usage minimal) ---- */
  --positive: #12B981;    /* score après, validations */
  --attention: #F0663F;   /* problème/perte, sobre — remplace le rouge */
  --attention-soft: #FDEDE7;  /* fonds badge corail doux */
  --positive-soft: #E7F8F1;   /* fonds badge vert doux */

  /* ---- Typo ---- */
  --font-display: 'General Sans', Inter, -apple-system, sans-serif;
  --font-body: 'General Sans', Inter, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* ---- Formes & profondeur ---- */
  --radius-card: 24px;      /* cartes 20–28 */
  --radius-btn: 13px;       /* boutons 12–14 */
  --radius-pill: 100px;
  --shadow-soft: 0 20px 50px -20px rgba(20, 20, 20, 0.12);
  --shadow-float: 0 30px 70px -25px rgba(20, 20, 20, 0.16);

  /* ---- Motion ---- */
  --ease-tona: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-duration: 0.6s;
}

/* ---- Primitives réutilisables (Étape 0 : validées ici, consommées ensuite) ---- */
.tona-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff;
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  padding: 14px 26px; border: 0; border-radius: var(--radius-btn);
  cursor: pointer; transition: transform .25s var(--ease-tona), box-shadow .25s var(--ease-tona);
}
.tona-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.tona-btn:focus-visible { outline: 3px solid var(--grad-lavender); outline-offset: 2px; }
.tona-btn .arr { transition: transform .25s var(--ease-tona); }
.tona-btn:hover .arr { transform: translateX(3px); }

.tona-link { color: var(--ink); font-weight: 500; text-decoration: none; }
.tona-link:hover { text-decoration: underline; }

.tona-card {
  background: var(--surface); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft); padding: 28px;
}

.tona-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft); padding: 8px 16px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink);
}
.tona-pill.tilt-l { transform: rotate(-2deg); }
.tona-pill.tilt-r { transform: rotate(2deg); }

.tona-badge-positive {
  display: inline-flex; gap: 6px; align-items: center;
  background: var(--positive-soft); color: var(--positive);
  border-radius: var(--radius-pill); padding: 5px 13px;
  font-size: 12.5px; font-weight: 600;
}
.tona-badge-attention {
  display: inline-flex; gap: 6px; align-items: center;
  background: var(--attention-soft); color: var(--attention);
  border-radius: var(--radius-pill); padding: 5px 13px;
  font-size: 12.5px; font-weight: 600;
}

.tona-mono { font-family: var(--font-mono); }
.tona-grad-text {
  background: var(--grad-signature);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .tona-btn, .tona-btn .arr { transition: none; }
}