/* Design tokens — unica fonte CSS (allineata a brand.js) */
:root {
  --color-terra: #43200a;
  --color-oro: #f4cb8b;
  --color-oro-testo: #7a4e14;
  --color-ocra: #f4cb8b;
  --color-crema: #fbf6ee;
  --color-carta: #fffcf7;
  --color-testo: #43200a;
  --color-testo-muto: #6b5344;
  --color-bordo: #e8d9c4;
  --color-accento: #8b5a2b;
  --color-su-terra: #fffcf7;
  --color-successo: #1b6b43;
  --color-pericolo: #a12828;
  --color-avviso: #9a5b12;
  --color-info: #7a4e14;

  /* Stati ordine (sfondo badge) — testo sempre presente in UI */
  --stato-ricevuto-bg: #f7ead0;
  --stato-ricevuto-fg: #7a4e14;
  --stato-prep-bg: #f5e2c4;
  --stato-prep-fg: #9a5b12;
  --stato-pronto-bg: #d8f0e4;
  --stato-pronto-fg: #1b6b43;
  --stato-in_consegna-bg: #d4e8f7;
  --stato-in_consegna-fg: #1a4f7a;
  --stato-ritirato-bg: #ebe4da;
  --stato-ritirato-fg: #5c4638;
  --stato-annullato-bg: #f5d9d9;
  --stato-annullato-fg: #a12828;
  --stato-ritardo-bg: #a12828;
  --stato-ritardo-fg: #fffcf7;
  --stato-nuovo-bg: #f4cb8b;
  --stato-nuovo-fg: #43200a;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(67, 32, 10, 0.06);
  --shadow-2: 0 4px 14px rgba(67, 32, 10, 0.08);
  --shadow-3: 0 12px 32px rgba(67, 32, 10, 0.12);
  --shadow: var(--shadow-1);

  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto,
    system-ui, sans-serif;
  --font-display: ui-serif, 'New York', Georgia, 'Times New Roman', serif;

  --fs-caption: 0.8rem;
  --fs-body: 1rem;
  --fs-subhead: 1.05rem;
  --fs-title: 1.35rem;
  --fs-large-title: 1.75rem;
  --fs-hero-num: 3.25rem;

  --max-width: 720px;
  --nav-h: 64px;
  --topbar-h: 56px;
  --touch: 44px;
  --touch-staff: 48px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur: 180ms;
  --dur-sheet: 240ms;

  --glass: rgba(255, 252, 247, 0.82);
  --glass-dark: rgba(42, 21, 8, 0.88);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-crema: #2a1508;
    --color-carta: #3d2010;
    --color-terra: #f4cb8b;
    --color-oro: #f4cb8b;
    --color-oro-testo: #f4cb8b;
    --color-ocra: #f4cb8b;
    --color-testo: #fbf6ee;
    --color-testo-muto: #d4b896;
    --color-bordo: #5c3a22;
    --color-accento: #f4cb8b;
    --color-su-terra: #2a1508;
    --color-successo: #5dcaa0;
    --color-pericolo: #f0a0a0;
    --color-avviso: #f4cb8b;
    --color-info: #f4cb8b;

    --stato-ricevuto-bg: #5a3a18;
    --stato-ricevuto-fg: #f4cb8b;
    --stato-prep-bg: #6a4518;
    --stato-prep-fg: #f4cb8b;
    --stato-pronto-bg: #1e4a35;
    --stato-pronto-fg: #a8e6c8;
    --stato-ritirato-bg: #4a3428;
    --stato-ritirato-fg: #d4b896;
    --stato-annullato-bg: #5a2828;
    --stato-annullato-fg: #f0a0a0;
    --stato-ritardo-bg: #c0392b;
    --stato-ritardo-fg: #fffcf7;
    --stato-nuovo-bg: #f4cb8b;
    --stato-nuovo-fg: #43200a;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.4);
    --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.45);
    --glass: var(--glass-dark);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0ms;
    --dur-sheet: 0ms;
  }
}