/* ============================================================================
   mm-tokens.css — Design tokens del nuovo sistema di stile MMWeb.
   Fonte di verità: Docs/RESTYLING_PLAN.md §3.1.
   In carico: Restyling 2026Q2 (branch restyle/2026Q2).
   ============================================================================ */

:root {
  /* === Base === */
  --mm-white:               #ffffff;

  /* === Palette di dominio (buy/sell) === */
  --mm-color-buy:           #dc2626;   /* rosso buy/acquisto (canonico) */
  --mm-color-buy-bright:    #ef4444;   /* variante chiara per gradient */
  --mm-color-buy-light:     #fecaca;   /* bordi/sfondi rossi tenui */
  --mm-color-buy-bg:        #fef2f2;   /* sfondo molto tenue */
  --mm-color-sell:          #059669;   /* verde sell/vendita (canonico) */
  --mm-color-sell-light:    #bbf7d0;   /* bordi/sfondi verdi tenui */
  --mm-color-sell-bg:       #f0fdf4;   /* sfondo molto tenue */

  /* === Palette di stato === */
  --mm-color-info:          #3b82f6;
  --mm-color-info-dark:     #1e40af;   /* shipping headers */
  --mm-color-info-light:    #60a5fa;   /* gradient header notifiche */
  --mm-color-warning:       #f59e0b;   /* amber */
  --mm-color-warning-dark:  #b45309;   /* amber-700, per testo su sfondo chiaro (badge-light-warning) */
  --mm-color-warning-light: #fcd34d;
  --mm-color-warning-bg:    #fffbeb;
  --mm-color-danger:        #dc2626;   /* alias di --mm-color-buy per UI Bootstrap-style */
  --mm-color-success:       #10b981;
  --mm-color-primary:       #00A3FF;   /* allineato a --bs-primary Metronic, vedi DEC-009 / D-01 */

  /* === Grays === */
  --mm-gray-900:            #111827;   /* testo primario */
  --mm-gray-700:            #374151;
  --mm-gray-500:            #6b7280;   /* testo secondario */
  --mm-gray-400:            #9ca3af;   /* labels */
  --mm-gray-300:            #d1d5db;   /* border light */
  --mm-gray-200:            #e5e7eb;
  --mm-gray-100:            #f3f4f6;   /* background card */
  --mm-gray-50:             #f9fafb;

  /* === Typography === */
  --mm-fs-label:            10px;       /* uppercase semibold */
  --mm-fs-caption:          11px;
  --mm-fs-body:             13px;       /* default text */
  --mm-fs-emphasis:         15px;
  --mm-fs-value:            17px;       /* numeri importanti */
  --mm-fs-h-section:        13px;       /* header di sezione (uppercase) */

  --mm-fw-regular:          400;
  --mm-fw-medium:           500;
  --mm-fw-semibold:         600;
  --mm-fw-bold:             700;

  /* === Spacing (compact-flat) === */
  --mm-pad-card:            8px;
  --mm-pad-card-sm:         6px;
  --mm-pad-card-lg:         12px;
  --mm-gap-card:            6px;
  --mm-gap-internal:        4px;
  --mm-gap-flex:            12px;

  /* === Layout === */
  --mm-radius-card:         8px;
  --mm-radius-pill:         9999px;
  --mm-shadow-card:         0 1px 3px rgba(0, 0, 0, .06);
  --mm-shadow-pop:          0 4px 12px rgba(0, 0, 0, .08);

  /* === Transizioni === */
  --mm-tr-fast:             .15s ease-out;
  --mm-tr-medium:           .3s ease-out;

  /* === Header gradient (firma del design system v1.0) === */
  --mm-grad-header:         linear-gradient(135deg, var(--mm-gray-100) 0%, var(--mm-gray-50) 100%);
  /* Chrome topbar: tinta calma uniforme (blu medio, leggermente più chiaro).
     Variazione minima 2-stop blue-700 → blue-600 — solo profondità sottile.
     Default = aziende miste (trading + distribution). Le 2 varianti sotto
     vengono attivate quando l'azienda è solo trading o solo distribution
     (vedi data.profile.enable_trading / enable_distribution). */
  --mm-grad-chrome:              linear-gradient(180deg, #1d4ed8 0%, #2563eb 100%);
  --mm-grad-chrome-trading:      linear-gradient(180deg, #b45309 0%, #d97706 100%);  /* amber-700 → amber-600 */
  --mm-grad-chrome-distribution: linear-gradient(180deg, #0e7490 0%, #0891b2 100%);  /* cyan-700 → cyan-600 */

  /* === Area colors (sidebar wayfinding per gruppo funzionale) ===
     Una tinta per area, applicata solo all'icona del menu (non all'item bg).
     Sezioni mappate ai sotto-componenti c-menu-* + sezioni inline aside.html. */
  --mm-area-main:           var(--mm-color-primary);   /* top group (default) */
  --mm-area-admin:          #6366f1;   /* indigo — UFFICIO AMMINISTRAZIONE */
  --mm-area-trading:        #f59e0b;   /* amber — AREA ACQUISTI & VENDITE */
  --mm-area-distribution:   #f43f5e;   /* rose — distribution */
  --mm-area-lab:            #10b981;   /* emerald — LABORATORIO */
  --mm-area-logistics:      #06b6d4;   /* cyan — AREA SPEDIZIONI & LOGISTICA */
  --mm-area-shipping:       #8b5cf6;   /* violet — GESTIONE SPEDIZIONI */
  --mm-area-warehouse:      #f97316;   /* orange — Warehouses inline */
  --mm-area-widgets:        #64748b;   /* slate — WIDGETS */

  /* Area DARK (per testo active state — contrasto maggiore su bg light) */
  --mm-area-main-dark:      #0077c2;   /* primary dark */
  --mm-area-admin-dark:     #4338ca;   /* indigo-700 */
  --mm-area-trading-dark:   #b45309;   /* amber-700 */
  --mm-area-distribution-dark: #be123c;   /* rose-700 */
  --mm-area-lab-dark:       #047857;   /* emerald-700 */
  --mm-area-logistics-dark: #0e7490;   /* cyan-700 */
  --mm-area-shipping-dark:  #6d28d9;   /* violet-700 */
  --mm-area-warehouse-dark: #c2410c;   /* orange-700 */
  --mm-area-widgets-dark:   #334155;   /* slate-700 */

  /* Area BG light (per stato active/hover — bg tinto della tinta area) */
  --mm-area-main-bg:          rgba(0, 163, 255, 0.16);
  --mm-area-admin-bg:         rgba(99, 102, 241, 0.18);
  --mm-area-trading-bg:       rgba(245, 158, 11, 0.20);
  --mm-area-distribution-bg:  rgba(244, 63, 94, 0.18);
  --mm-area-lab-bg:           rgba(16, 185, 129, 0.18);
  --mm-area-logistics-bg:     rgba(6, 182, 212, 0.20);
  --mm-area-shipping-bg:      rgba(139, 92, 246, 0.18);
  --mm-area-warehouse-bg:     rgba(249, 115, 22, 0.19);
  --mm-area-widgets-bg:       rgba(100, 116, 139, 0.18);
}

/* Dark mode (D-02 fuori scope per questa iterazione, override [data-bs-theme=dark]
   non scritto. I token sono strutturati per supportarlo in futuro). */