/*
 * CookinBreak — Design system : tokens
 * ------------------------------------------------------------------
 * Toutes les valeurs visuelles (couleurs, rayons, ombres, espacements,
 * typo) vivent ici, et nulle part ailleurs. Un composant n'écrit jamais
 * une couleur en dur : il lit un token.
 *
 * Direction : fond crème léger, gris neutres (aucun brun), teal de la marque,
 * un accent corail utilisé avec parcimonie, grands arrondis, ombres douces.
 *
 * Réglage rapide de la forme des boutons et badges : voir « Rayons » (--ds-radius-btn / --ds-radius-badge).
 *
 * Mode sombre : la classe `dark-mode` est posée sur <html> par header.php.
 * Chaque token de couleur a donc une valeur claire (:root) et une valeur
 * sombre (.dark-mode).
 *
 * Ce fichier ne contient que des variables : le charger ne change rien
 * à l'apparence d'une page tant qu'elle n'utilise pas de composant `ds-`.
 */

:root {
  /* --- Marque -------------------------------------------------- */
  --ds-primary: #00828e;          /* boutons, éléments actifs */
  --ds-primary-hover: #025f67;
  --ds-primary-text: #006b76;     /* texte/lien teal sur fond clair (contraste AA) */
  --ds-primary-soft: #dcefec;     /* fond teinté */
  --ds-on-primary: #ffffff;

  /* --- Accent : corail, vif, à utiliser avec parcimonie (≈ 10 %) --- */
  --ds-accent: #f26b4b;           /* remplissages, points, détails */
  --ds-accent-hover: #e0522f;
  --ds-accent-soft: #ffe9e1;      /* fond teinté */
  --ds-accent-text: #b8431f;      /* texte d'accent lisible sur fond clair (contraste AA) */
  --ds-on-accent: #1c1c1c;        /* texte posé sur un fond d'accent (le blanc manque de contraste) */

  /* --- Surfaces (crème léger) --------------------------------------- */
  --ds-bg: #fcf9f4;               /* fond de page : crème léger */
  --ds-surface: #ffffff;          /* cartes */
  --ds-surface-2: #f5f2ec;        /* champs, zones en retrait */
  --ds-surface-hover: #f9f6f1;
  --ds-overlay: rgba(0, 0, 0, 0.5);

  /* --- Texte --------------------------------------------------- */
  --ds-text: #1c1c1c;
  --ds-text-2: #5c5c5c;
  --ds-text-3: #6e6e6e;

  /* --- Bordures ------------------------------------------------ */
  --ds-border: #ece8e0;
  --ds-border-strong: #d9d4ca;

  /* --- États --------------------------------------------------- */
  --ds-success: #2f8a55;
  --ds-success-soft: #e2f3e5;
  --ds-warning: #b4571a;
  --ds-warning-soft: #fdebd6;
  --ds-danger: #d0314c;
  --ds-danger-hover: #ae2139;
  --ds-danger-soft: #fde3e6;
  --ds-info: #2f5fb3;
  --ds-info-soft: #e5edfa;

  /* --- Nutrition (suivi nutritionnel : macros, eau) ----------- */
  --ds-nutri-p: #2f8a55;          /* protéines */
  --ds-nutri-c: #c9861a;          /* glucides */
  --ds-nutri-f: #c9506a;          /* lipides */
  --ds-nutri-fib: #6f8a2e;        /* fibres */
  --ds-nutri-water: #3a7bd5;      /* eau */
  --ds-nutri-water-soft: #e3eefc;

  /* --- Rayons (grands et doux) --------------------------------- */
  --ds-radius-xs: 10px;           /* badges */
  --ds-radius-sm: 16px;           /* champs, boutons */
  --ds-radius-md: 22px;           /* éléments moyens */
  --ds-radius-lg: 30px;           /* cartes, fenêtres */
  --ds-radius-pill: 999px;        /* interrupteurs, avatars */
  /* Forme des boutons et badges : « doux » aujourd'hui. Pour passer en pilule,
     mettre 999px aux deux lignes suivantes (rien d'autre à modifier). */
  --ds-radius-btn: 16px;          /* boutons : 16 doux · 20 arrondi · 999 pilule */
  --ds-radius-badge: 10px;        /* badges : 10 doux · 13 arrondi · 999 pilule */

  /* --- Ombres (neutres) ----------------------------------------- */
  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 18px rgba(0, 0, 0, 0.06);
  --ds-shadow-md: 0 12px 30px -8px rgba(0, 0, 0, 0.16);
  --ds-shadow-lg: 0 28px 56px -14px rgba(0, 0, 0, 0.3);
  --ds-focus-ring: 0 0 0 4px rgba(0, 130, 142, 0.24);

  /* --- Espacements (échelle de 4 px) --------------------------- */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;

  /* --- Typographie --------------------------------------------- */
  --ds-font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ds-font-display: 'Unbounded', 'Poppins', system-ui, sans-serif;
  --ds-text-xs: 0.75rem;
  --ds-text-sm: 0.875rem;
  --ds-text-base: 1rem;
  --ds-text-lg: 1.125rem;
  --ds-text-xl: 1.375rem;
  --ds-text-2xl: 1.75rem;

  /* --- Mouvement ----------------------------------------------- */
  --ds-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ds-duration: 220ms;

  /* --- Couches ------------------------------------------------- */
  --ds-z-sticky: 50;
  --ds-z-modal: 1000;
  --ds-z-toast: 100100;      /* au-dessus de l'en-tête du site (z-index 9999 à 100000) */
}

/* ------------------------------------------------------------------
 * Mode sombre : anthracite neutre
 * ------------------------------------------------------------------ */
.dark-mode {
  --ds-primary: #00828e;
  --ds-primary-hover: #0a97a4;
  --ds-primary-text: #52cbd6;
  --ds-primary-soft: rgba(82, 203, 214, 0.15);
  --ds-on-primary: #ffffff;
  --ds-accent: #ff8463;
  --ds-accent-hover: #ff9a7d;
  --ds-accent-soft: rgba(255, 132, 99, 0.16);
  --ds-accent-text: #ff9d82;
  --ds-on-accent: #1c1c1c;

  --ds-bg: #141414;
  --ds-surface: #1f1f1f;
  --ds-surface-2: #2a2a2a;
  --ds-surface-hover: #252525;
  --ds-overlay: rgba(0, 0, 0, 0.66);

  --ds-text: #f4f4f4;
  --ds-text-2: #c4c4c4;
  --ds-text-3: #9b9b9b;

  --ds-border: #343434;
  --ds-border-strong: #4b4b4b;

  --ds-success: #6fd491;
  --ds-success-soft: rgba(111, 212, 145, 0.15);
  --ds-warning: #f5a964;
  --ds-warning-soft: rgba(245, 169, 100, 0.15);
  --ds-danger: #ff8196;
  --ds-danger-hover: #ff9fae;
  --ds-danger-soft: rgba(255, 129, 150, 0.15);
  --ds-info: #9bbcf7;
  --ds-info-soft: rgba(155, 188, 247, 0.15);

  --ds-nutri-p: #6fd491;
  --ds-nutri-c: #f2b552;
  --ds-nutri-f: #ff8fa6;
  --ds-nutri-fib: #b5d468;
  --ds-nutri-water: #7fb1f5;
  --ds-nutri-water-soft: rgba(127, 177, 245, 0.16);

  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.22);
  --ds-shadow-md: 0 12px 30px -8px rgba(0, 0, 0, 0.5);
  --ds-shadow-lg: 0 28px 56px -14px rgba(0, 0, 0, 0.7);
  --ds-focus-ring: 0 0 0 4px rgba(82, 203, 214, 0.34);
}