/*
 * Design tokens — unique source de vérité visuelle de la landing.
 *
 * Les valeurs de marque (teal, encre) sont celles de l'app : `AppColors.brand`
 * (#00838F) et sa déclinaison sombre, reprises du splash natif. Toute couleur de
 * la page en descend — pas de hex isolé dans les feuilles suivantes.
 *
 * Thème clair unique, assumé : chaque surface peint son fond explicitement.
 */
:root {
  /* Encre & fonds (neutres biaisés teal, accordés à l'accent) */
  --ink: #0d1b1e;
  --ink-soft: #46595d;
  --ink-faint: #647579; /* AA : 5,2:1 sur --paper, 4,8:1 sur --paper-tint */
  --paper: #ffffff;
  --paper-tint: #f1f7f7;
  --line: #dde8e9;

  /* Accent (= teal de marque, AppColors.brand) */
  --accent: #00838f;
  --accent-hover: #006b75;
  --accent-soft: #e0f2f4;
  --accent-deep: #005662; /* fonds sombres : bandeau final, pied de page */
  --gold: #ffc107; /* AppColors.gold — étoile de la note, comme le podium de l'app */

  /* Typographie */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  /* Rayons */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  /* Ombres */
  --shadow-sm: 0 1px 2px rgba(13, 27, 30, 0.06), 0 1px 3px rgba(13, 27, 30, 0.08);
  --shadow-md: 0 4px 12px rgba(13, 27, 30, 0.08), 0 16px 40px rgba(13, 27, 30, 0.08);

  /* Rythme */
  --container: 1100px;
  --container-narrow: 720px;
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --section-y: clamp(3.5rem, 6vw, 5.5rem);
  --header-h: 64px;
}