/* ==========================================================================
   Dyonis · DESIGN TOKENS v5 (Modern + Light Mode)
   2026-05-18 — Modernizzazione: Inter (UI) + Cormorant Garamond (display),
   scala tipografica più ariosa, light mode opzionale, focus ring accessibili,
   tap target 44px, shadow morbide, radius più morbidi.
   Identità: garnet/burgundy/gold/cream invariata.
   ========================================================================== */

:root{
  /* ===== Colori identità (invariati) ===== */
  --garnet:     #5C0A14;
  --burgundy:   #7B1D26;
  --ruby:       #9B2335;
  --gold:       #C9A84C;
  --gold-light: #D4B86A;
  --gold-soft:  #E0C580;
  --cream:      #F5EDD8;
  --cream-light:#FAF6ED;
  --dark:       #1A0A0D;
  --dark-soft:  #2A1216;
  --dark-deep:  #120608;
  --text-muted: #A89080;
  --text-dim:   #806D5F;

  /* ===== Componenti RGB (per rgba(var(--x-rgb), alpha)) — Dyonis temi 2026-06-23 =====
     Permettono di tokenizzare gli rgba inline mantenendo l'alpha, e di cambiarli per tema. */
  --garnet-rgb:   92,10,20;
  --burgundy-rgb: 123,29,38;
  --ruby-rgb:     155,35,53;
  --gold-rgb:     201,168,76;
  --cream-rgb:    245,237,216;
  --darksoft-rgb: 46,16,24;

  /* ===== Superfici (DARK MODE — default) ===== */
  --surface-base:    var(--dark);
  --surface-raised:  rgba(255,255,255,0.045);
  --surface-overlay: rgba(255,255,255,0.075);
  --surface-glass:   rgba(46,16,24,0.55);
  --surface-elevated:linear-gradient(145deg, rgba(46,16,24,0.88), rgba(26,10,13,0.95));
  /* Gradiente brand canonico (FAB, bottoni gold, header attivi) — usare questo
     invece di duplicare linear-gradient(135deg, garnet, ruby) inline */
  --gradient-brand:  linear-gradient(135deg, var(--garnet), var(--ruby));

  /* Testo (semantico, per light/dark) */
  --text-primary:   var(--cream);
  --text-secondary: var(--cream);
  --text-on-surface:var(--cream);
  --text-strong:    var(--gold-light);
  --text-on-accent: var(--cream);

  /* ===== Bordi (semantici) ===== */
  --border-subtle:  rgba(201,168,76,0.10);
  --border-default: rgba(201,168,76,0.18);
  --border-strong:  rgba(201,168,76,0.40);
  --border-accent:  var(--gold);

  /* ===== Stati ===== */
  --state-success:    #52B788;
  --state-success-bg: rgba(82,183,136,0.12);
  --state-success-bd: rgba(82,183,136,0.35);
  --state-warning:    #E8CC7A;
  --state-warning-bg: rgba(232,204,122,0.12);
  --state-warning-bd: rgba(232,204,122,0.35);
  --state-danger:     #E8A0A0;
  --state-danger-bg:  rgba(220,38,38,0.14);
  --state-danger-bd:  rgba(220,38,38,0.35);
  --state-info:       #86C5DA;
  --state-info-bg:    rgba(134,197,218,0.12);
  --state-info-bd:    rgba(134,197,218,0.35);

  /* ===== Drink Window ===== */
  --dw-ready: var(--state-success);
  --dw-soon:  var(--state-warning);
  --dw-hold:  var(--state-info);
  --dw-past:  var(--state-danger);

  /* ===== Tag palette (smorzati, tono enoteca) ===== */
  --tag-bordeaux: #7B1D26;
  --tag-burgundy: #5C0A14;
  --tag-gold:     #A88330;
  --tag-olive:    #6B7A2F;
  --tag-forest:   #2E5A3E;
  --tag-teal:     #2A6670;
  --tag-mauve:    #7A4860;
  --tag-amber:    #B7762D;
  --tag-stone:    #4A4540;
  --tag-cream:    #A89080;

  /* ===== Tipografia v5 (modernizzata) =====
     - Display (titoli, brand): Cormorant Garamond 600/700 (elegante wine-house)
     - Body / UI (form, tabelle, chat, navi): Inter 14-16px (sans moderno, leggibile)
     - Mono (numeri tabulari, codici): JetBrains Mono / SF Mono / system fallback
     Manteniamo Cormorant per gli elementi a brand-forte; il resto passa a Inter
     per leggibilità schermo e feel contemporaneo. */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-prose:   'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Scala tipografica più ariosa (modernizzata) */
  --fs-xs:  11px;  /* era 10 */
  --fs-sm:  12px;  /* era 11 */
  --fs-md:  14px;  /* era 13 — base */
  --fs-lg:  16px;  /* era 15 */
  --fs-xl:  19px;  /* era 18 */
  --fs-2xl: 24px;  /* era 22 */
  --fs-3xl: 32px;
  --fs-4xl: 44px;  /* nuovo, per hero */

  /* Line heights espliciti */
  --lh-tight: 1.25;
  --lh-snug:  1.4;
  --lh-base:  1.55;  /* era ~1.5, leggermente più arioso */
  --lh-loose: 1.75;

  --tracking-display: 0.10em;
  --tracking-display-tight: 0.06em;
  --tracking-display-loose: 0.18em;
  --tracking-body: 0.005em;     /* Inter ottimale */
  --tracking-ui:   0.02em;      /* per label/btn uppercase */

  /* ===== Spazi (scala 4px) ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ===== Border-radius (modernizzato — più morbido) ===== */
  --radius-xs:   4px;     /* era 3 */
  --radius-sm:   8px;     /* era 6 */
  --radius-md:   12px;    /* era 10 */
  --radius-lg:   16px;    /* era 16 */
  --radius-xl:   24px;
  --radius-2xl:  32px;    /* nuovo */
  --radius-pill: 9999px;

  /* ===== Ombre (modernizzate — più morbide e diffuse) ===== */
  --shadow-1:    0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.15);
  --shadow-2:    0 4px 16px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.18);
  --shadow-3:    0 16px 40px rgba(0,0,0,0.42), 0 6px 16px rgba(0,0,0,0.22);
  --shadow-4:    0 24px 64px rgba(0,0,0,0.50), 0 8px 24px rgba(0,0,0,0.28);
  --shadow-glow: 0 0 32px rgba(201,168,76,0.22);
  --shadow-inset:inset 0 1px 2px rgba(0,0,0,0.30);

  /* ===== Transizioni ===== */
  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 480ms cubic-bezier(0.4, 0, 0.2, 1);
  --easing-out:     cubic-bezier(0.16, 1, 0.3, 1);

  /* ===== Focus ring accessibile (WCAG) ===== */
  --focus-ring:     0 0 0 3px rgba(201,168,76,0.45);
  --focus-ring-tight: 0 0 0 2px rgba(201,168,76,0.65);

  /* ===== Tap target accessibile (mobile) ===== */
  --tap-min: 44px;

  /* ===== Layout ===== */
  --sidebar-w:  248px;
  --topbar-h:   60px;       /* +4px, più ariosa */
  --content-max:1280px;
  --content-gutter: var(--space-5);
}

/* ===========================================================================
   LIGHT MODE — attivata con <html data-theme="light">
   Mantiene palette brand (garnet/gold), ribalta superfici e contrasti.
   =========================================================================== */
:root[data-theme="light"]{
  /* Superfici light */
  --surface-base:    #FAF6ED;                              /* cream chiaro */
  --surface-raised:  rgba(var(--garnet-rgb),0.045);
  --surface-overlay: rgba(var(--garnet-rgb),0.075);
  --surface-glass:   rgba(255,250,240,0.78);
  --surface-elevated:linear-gradient(145deg, #FFFFFF, #FAF6ED);

  /* Testo light */
  --text-primary:   #2A1216;        /* dark soft */
  --text-secondary: #4A2A30;
  --text-on-surface:#2A1216;
  --text-strong:    var(--garnet);
  --text-muted:     #6B4A50;
  --text-dim:       #8B6A70;

  /* Bordi light (gold più scuro per visibilità) */
  --border-subtle:  rgba(var(--garnet-rgb),0.10);
  --border-default: rgba(var(--garnet-rgb),0.18);
  --border-strong:  rgba(168,131,48,0.55);
  --border-accent:  #A88330;

  /* Gold più scuro/saturo per contrasto su sfondi chiari */
  --gold:        #A88330;
  --gold-light:  #B69748;
  --gold-soft:   #C9A84C;
  --gold-rgb:    168,131,48;   /* override light: gli rgba oro tokenizzati si scuriscono su bianco */

  /* Stati: bg leggermente più visibili su sfondo chiaro */
  --state-success-bg: rgba(82,183,136,0.14);
  --state-warning-bg: rgba(232,204,122,0.22);
  --state-danger-bg:  rgba(220,38,38,0.10);
  --state-info-bg:    rgba(134,197,218,0.18);

  /* Shadow light: più sottili, no neri pesanti */
  --shadow-1:    0 1px 3px rgba(92,10,20,0.08), 0 1px 2px rgba(92,10,20,0.05);
  --shadow-2:    0 4px 16px rgba(92,10,20,0.10), 0 2px 6px rgba(92,10,20,0.06);
  --shadow-3:    0 16px 40px rgba(92,10,20,0.14), 0 6px 16px rgba(92,10,20,0.08);
  --shadow-4:    0 24px 64px rgba(92,10,20,0.18), 0 8px 24px rgba(92,10,20,0.10);

  /* Focus ring light */
  --focus-ring:     0 0 0 3px rgba(168,131,48,0.40);
  --focus-ring-tight: 0 0 0 2px rgba(168,131,48,0.60);
}

/* ===========================================================================
   ACCENTI TEMA — <html data-accent="borgogna|vigna|notte"> (Dyonis 2026-06-23)
   Cambiano SOLO il colore primario brand (garnet/burgundy/ruby) + i loro RGB.
   L'oro resta il metallo comune. Ortogonali al data-theme (chiaro/scuro).
   "bordeaux" = default (nessun data-accent → usa i valori :root).
   =========================================================================== */
:root[data-accent="borgogna"]{
  --garnet:#5A2150; --burgundy:#73306A; --ruby:#8E4585;
  --garnet-rgb:90,33,80; --burgundy-rgb:115,48,106; --ruby-rgb:142,69,133;
}
:root[data-accent="vigna"]{
  --garnet:#22421B; --burgundy:#2F5A24; --ruby:#3E7C47;
  --garnet-rgb:34,66,27; --burgundy-rgb:47,90,36; --ruby-rgb:62,124,71;
}
:root[data-accent="notte"]{
  --garnet:#1B2A4A; --burgundy:#233A5E; --ruby:#2C4470;
  --garnet-rgb:27,42,74; --burgundy-rgb:35,58,94; --ruby-rgb:44,68,112;
}

/* Body background sostituisce ::before quando in light */
:root[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(201,168,76,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(var(--garnet-rgb),0.06) 0%, transparent 55%),
    var(--surface-base) !important;
}

/* ===========================================================================
   Reset tipografico globale (modernizzato)
   =========================================================================== */
html { font-family: var(--font-body); font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--text-on-surface);
  background: var(--surface-base);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--transition), color var(--transition);
}

/* Numeri tabulari per tabelle/KPI/prezzi */
table, .num, .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Headings: Cormorant per il display brand-strong */
h1, h2, h3, .h-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-display-tight);
  line-height: var(--lh-tight);
  color: var(--text-strong);
  margin: 0;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }

/* Focus visibile globale (accessibilità) */
*:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Riduzione motion per chi lo richiede (accessibilità) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}