/* =============================================================================
   TOKENS — unica fonte per colori, tipografia, spazi, raggi, ombre, layout.
   Il tema scuro ridefinisce SOLO i token semantici: i componenti non sanno
   in che tema sono. Due temi espliciti (data-theme=light|dark), nessun "auto":
   il JS applica quello salvato, chiaro se non c'e' nulla.
   ============================================================================= */
:root {
  color-scheme: light;

  /* --- palette brand (fissa, non cambia col tema) --- */
  --navy-900: #0f1a2e;
  --navy-800: #16233a;
  --navy-700: #24395c;
  --navy-500: #3b5583;
  --gold-600: #8a6a17;
  --gold-500: #c8992e;
  --gold-400: #d9ac46;
  --gold-100: #f6edd6;
  --paper:    #fbfaf6;

  /* --- semantici: superfici e testo --- */
  --bg:           #f4f2ee;
  --surface:      #ffffff;
  --surface-2:    #f7f6f3;
  --surface-3:    #efede8;
  --zebra:        #faf9f6;
  --line:         #e3e0d9;
  --line-strong:  #cfcac0;
  --ink:          #1c2230;
  --ink-2:        #4a5160;
  --muted:        #78808f;

  /* --- semantici: azioni --- */
  --primary:      var(--gold-500);     /* CTA principale: oro */
  --primary-hover:var(--gold-400);
  --on-primary:   #1b1d22;
  --accent-ink:   var(--gold-600);     /* oro usato come testo su chiaro */
  --focus:        var(--gold-500);
  --brand-bg:     var(--navy-800);     /* sidebar, fasce brand */
  --brand-bg-2:   #1e2c47;
  --on-brand:     var(--paper);
  --on-brand-2:   #b9c0cf;
  --brand-line:   rgba(255,255,255,.14);

  /* --- semantici: stati --- */
  --success:      #2e7d32;
  --success-bg:   #e8f3e9;
  --warning:      #a8650a;
  --warning-bg:   #fbf1e0;
  --danger:       #b3261e;
  --danger-bg:    #fbe9e7;
  --info:         var(--navy-500);
  --info-bg:      #e9eef7;

  /* --- tabella prezzi --- */
  --tbl-head-bg:  var(--gold-100);
  --tbl-head-ink: var(--gold-600);

  /* --- tipografia --- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --lh-tight: 1.2;
  --lh-base: 1.5;
  --track-label: .1em;

  /* --- spazi (scala 4px) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* --- raggi --- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* --- ombre --- */
  --shadow-sm: 0 1px 2px rgba(20,24,34,.06);
  --shadow-md: 0 4px 14px rgba(20,24,34,.10);
  --shadow-lg: 0 18px 44px rgba(20,24,34,.22);

  /* --- layout --- */
  --w-sidebar: 248px;
  --w-aside: 400px;   /* pannello "Il tuo ordine"; cresce a 460px oltre i 1440px (ordine.css) */
  --w-search: 420px;
  /* Lo spettro del tasto «A colore». Tinte smorzate apposta: a piena saturazione, accanto
     all'oro e al blu notte del marchio, sembrerebbe un tasto di un'altra applicazione. */
  --spettro: linear-gradient(90deg, #d9534f, #e0913a, #cdb43a, #4aa960, #3aa2b0, #4b7fd4, #8a5fc4);
  --w-content: 1240px;
  --h-topbar: 60px;
  --h-tabbar: 60px;
  --h-subbar: 52px;
  --h-control: 40px;
  --h-control-sm: 34px;

  /* --- transizioni --- */
  --t-fast: .12s ease;
  --t-base: .2s ease;
}

/* ---------- tema scuro: solo i token semantici ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg:           #0f141d;
  --surface:      #171d29;
  --surface-2:    #1c2331;
  --surface-3:    #222a3a;
  --zebra:        #1a2130;
  --line:         #2a3242;
  --line-strong:  #3a4356;
  --ink:          #e6e8ee;
  --ink-2:        #aab1bd;
  --muted:        #8b93a0;
  --accent-ink:   var(--gold-400);
  --brand-bg:     #111927;
  --brand-bg-2:   #1a2434;
  --success-bg:   #1b2e1d;
  --warning-bg:   #2f2410;
  --danger-bg:    #331a18;
  --info-bg:      #1b2538;
  --tbl-head-bg:  rgba(200,153,46,.16);
  --tbl-head-ink: var(--gold-400);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.6);
}