/* ==========================================================================
   DESIGN TOKENS — source unique des valeurs de design.
   Toute couleur, rayon, ombre ou mesure de mise en page répétée vit ici.
   Les scripts lisent aussi ces variables (scripts/ui/tokens.js) pour le canvas.
   ========================================================================== */
:root{
  color-scheme:light;
  --font:"Montserrat",ui-sans-serif,system-ui,sans-serif;

  /* Couleurs de marque */
  --bg:#ffffff;
  --soft:#eaf0ff;
  --blue:#3a56d4;
  --blue-deep:#2a3fa8;
  --ink:#141414;
  --ink-2:#33384a;
  --muted:#6b7080;
  --line:#e3e7f2;
  --orange:#f2733a;
  --yellow:#f7c246;
  --green:#6fb33e;
  --gold:#c48a00;

  /* Couleurs fonctionnelles */
  --surface-alt:#f2f5fb;              /* fond derrière une photo */
  --danger:#c23b22; --danger-soft:#fde8e4;
  --urgent-bg:#fde3d6; --urgent-ink:#9a3b12;   /* aliment « à finir vite » */
  --tip-bg:#fff6dc;                   /* encarts astuce / lot */
  --leaf:#3f8f3a; --leaf-soft:#e2f2d6; --leaf-tint:#f2f9ec; --leaf-line:#cfe5c2; /* solidaire */
  --season-ink:#9a5a12; --season-text:#5a4630;
  --star-off:#c9cfdd;
  --track:#cfd8f5;                    /* segments de progression inactifs */
  --dash:#b9c4e6;                     /* bordure pointillée d'ajout photo */
  --mascot-light:#5a74e6;
  --whatsapp:#25d366;

  /* Teintes pastel des vignettes */
  --tint-blue:#dfe6ff; --tint-orange:#ffe3d4; --tint-green:var(--leaf-soft); --tint-yellow:#fff1c9;

  /* Dégradés */
  --grad-blue:linear-gradient(135deg,#3a56d4,#6d84ec);
  --grad-orange:linear-gradient(135deg,#f2733a,#f7a65f);
  --grad-green:linear-gradient(135deg,#5ea33a,#9ccf6a);
  --grad-leaf:linear-gradient(135deg,#3f8f3a,#7cc04b);
  --grad-season:linear-gradient(135deg,#fff1c9,#ffe3d4);
  --grad-insta:linear-gradient(45deg,#f9a030,#e1306c,#833ab4);

  /* Rayons */
  --r-xs:10px; --r-sm:12px; --r-md:14px; --r-lg:16px; --r-xl:18px;
  --r-2xl:20px; --r-3xl:22px; --r-4xl:24px; --r-5xl:26px; --r-pill:999px;

  /* Ombres */
  --shadow-float:0 10px 30px -10px rgba(0,0,0,.3);
  --shadow-float-strong:0 10px 30px -10px rgba(0,0,0,.35);
  --shadow-chip:0 2px 8px rgba(0,0,0,.08);

  /* Mise en page */
  --col:480px;                                        /* largeur de la colonne mobile */
  --gutter-l:max(20px,env(safe-area-inset-left,0px));
  --gutter-r:max(20px,env(safe-area-inset-right,0px));
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}