/* ============================================================
   FOODIE — DESIGN TOKENS (unica fonte di verità)
   Caricato in index.html PRIMA di foodie-results.css.
   Mirror lato Tailwind: tailwind.config.cjs · Doc: DESIGN.md
   Regola: nel codice usa SEMPRE questi token, mai hex sparsi.
   ============================================================ */

:root {
  /* ---- Brand / Primario (arancione Foodie) ---------------- */
  --primary:        #FD5F06;  /* orange-500 · brand ufficiale (theme-color, logo, CTA) */
  --primary-strong: #df5105;  /* orange-600 · hover/pressed  */
  --primary-dark:   #b84004;  /* orange-700 · testo su chiaro */
  --primary-tint:   #FFE7D5;  /* orange-100 · sfondi tenui   */

  /* ---- Superfici ------------------------------------------ */
  --surface:        #FFFFFF;  /* card / fogli               */
  --surface-canvas: #FBF5EC;  /* crema: sfondo pagina        */
  --surface-muted:  #F1EFE8;  /* chip / campi                */

  /* ---- Testo (ink) ---------------------------------------- */
  --ink:      #211C16;        /* testo primario              */
  --ink-soft: #8C8377;        /* secondario                  */
  --ink-mute: #B4AB9C;        /* terziario / placeholder     */

  /* ---- Bordi ---------------------------------------------- */
  --line:        #EFE6D8;
  --line-strong: #E6DBC9;

  /* ---- Stati ---------------------------------------------- */
  --success:      #2EA86A;  --success-text: #1B6E48;  --success-bg: #CDE6D6;
  --warning:      #E89A2B;  --warning-text: #8A5A0E;  --warning-bg: #FAE7C8;
  --danger:       #EF4444;  --danger-text:  #B42318;  --danger-bg:  #FEF2F2;
  --info:         #4A90D9;

  /* ---- Raggi ---------------------------------------------- */
  --r-card: 24px;
  --r-lg:   20px;
  --r-md:   16px;
  --r-sm:   12px;
  --r-pill: 999px;

  /* ---- Ombre (calde, tono brand) -------------------------- */
  --shadow-sm:      0 1px 2px rgba(33,28,22,.06);
  --shadow-card:    0 10px 30px -16px rgba(33,28,22,.30);
  --shadow-primary: 0 10px 24px -10px rgba(253,95,6,.45);

  /* ---- Tipografia ----------------------------------------- */
  --font-display: 'Fredoka', 'Nunito', 'Arial Rounded MT Bold', sans-serif;   /* wordmark / titoli */
  --font-sans:    'Plus Jakarta Sans', 'SF Pro', system-ui, sans-serif;        /* corpo testo       */

  /* ============================================================
     ALIAS DI COMPATIBILITÀ (non usare nel codice nuovo)
     Mantengono validi foodie-results.css e gli stili inline
     esistenti in Results.tsx / GroupDetails.tsx.
     Nota: --accent e --tomato* ora puntano al brand arancione
     (#FD5F06), unificando il secondo arancione "tomato" (#FF5A3C)
     con l'identità ufficiale. Reversibile cambiando una riga.
     ============================================================ */
  --cream:         var(--surface-canvas);
  --card:          var(--surface);
  --border:        var(--line);
  --border-strong: var(--line-strong);
  --accent:        var(--primary);
  --accent-dark:   var(--primary-strong);
  --tomato:        var(--primary);
  --tomato-dark:   var(--primary-dark);
  --tomato-tint:   var(--primary-tint);
  --green:      var(--success);  --green-text: var(--success-text);  --green-bg: var(--success-bg);
  --amber:      var(--warning);  --amber-text: var(--warning-text);  --amber-bg: var(--warning-bg);
  --chip-bg:    var(--surface-muted);
  --chip-text:  #5F5E5A;
  --font-results: var(--font-sans);
}