/* ==========================================================================
   Voltaria Impianti Elettrici — Design Tokens
   Fonte: 01_DESIGN_SYSTEM.md / 02_tokens.css
   ========================================================================== */

:root {
  /* ---- Brand (valori esatti da 02_tokens.css) ---------------------------- */
  --color-brand-1: #0d2c54; /* Blu Notte Sicurezza  — acciaio verniciato   */
  --color-brand-2: #f79256; /* Arancio Rame         — rame spazzolato      */
  --color-brand-3: #f7f9fc; /* Grigio Tech          — vetro satinato       */
  --color-brand-4: #1d2a3a; /* Antracite Scuro      — metallo brunito      */
  --color-brand-5: #fbc02d; /* Giallo Energia       — ottone lucido        */

  --font-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  /* Estensione: monospace per etichette, sigle di norma e cifre del listino.
     Serve il registro "documentazione tecnica" dell'archetipo Artigiano Sicuro. */
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace;

  --ease-fluid: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snappy: cubic-bezier(0.4, 0, 0.2, 1);
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;

  /* ---- Materiali ---------------------------------------------------------
     I nomi dei colori del brief descrivono superfici fisiche. Qui diventano
     texture reali: micro-grana direzionale in repeating-linear-gradient,
     nessuna immagine, costo di rendering trascurabile.
     ---------------------------------------------------------------------- */

  /* Acciaio verniciato a polvere — grana opaca sul blu notte */
  --material-steel:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px),
    linear-gradient(155deg, #123661, #0d2c54 46%, #091f3f);

  /* Metallo brunito — antracite con riflesso direzionale */
  --material-burnished:
    repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 4px),
    linear-gradient(160deg, #24323f, #1d2a3a 52%, #131d29);

  /* Vetro satinato antiriflesso — grana finissima sul grigio tech */
  --material-glass:
    repeating-linear-gradient(125deg, rgba(13, 44, 84, 0.014) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #ffffff, #f4f7fc);

  /* Rame spazzolato — per barre e filetti, mai per grandi campiture */
  --material-copper: linear-gradient(
    90deg,
    #b45309,
    #f79256 18%,
    #ffd2ae 34%,
    #f79256 52%,
    #c2410c 74%,
    #f79256 100%
  );

  /* Ottone lucido — accenti e LED di segnalazione */
  --material-brass: linear-gradient(100deg, #a97806, #fbc02d 30%, #ffeaa6 46%, #fbc02d 62%, #c99700 100%);

  /* ---- Tokens semantici -------------------------------------------------- */
  --surface: #ffffff;
  --surface-muted: var(--color-brand-3);
  --surface-inverse: var(--color-brand-1);
  --surface-inverse-2: var(--color-brand-4);

  /* Testo — tutti verificati >= 4.5:1 sui rispettivi sfondi */
  --text: var(--color-brand-4); /* 14.9:1 su bianco */
  --text-strong: var(--color-brand-1); /* 13.8:1 su bianco */
  --text-muted: #4a5a6e; /*  7.1:1 su bianco — 6.7:1 su Grigio Tech */
  --text-on-inverse: #ffffff; /* 13.8:1 su Blu Notte */
  --text-on-inverse-muted: #b9c6d8; /*  8.0:1 su Blu Notte */
  --text-on-accent: var(--color-brand-1); /*  6.1:1 su Arancio Rame */

  --border: #dde4ee;
  --border-strong: #c3cfe0;
  --border-inverse: rgba(255, 255, 255, 0.14);
  --hairline-copper: rgba(247, 146, 86, 0.55);

  --accent: var(--color-brand-2);
  --accent-deep: #c2410c; /*  5.0:1 su bianco — versione testuale del rame */
  --accent-ink: var(--color-brand-1);
  --energy: var(--color-brand-5);

  /* Stati LED della bento-grid servizi */
  --led-on: #22c55e; /*  6.1:1 su Blu Notte */
  --led-request: var(--color-brand-5); /*  8.3:1 su Blu Notte */
  --led-off: #94a6bc; /*  5.5:1 su Blu Notte */

  --focus-ring: var(--color-brand-5);

  /* ---- Scala spaziature (base 8px) --------------------------------------- */
  --space-1: 0.5rem; /*  8 */
  --space-2: 1rem; /* 16 */
  --space-3: 1.5rem; /* 24 */
  --space-4: 2rem; /* 32 */
  --space-5: 3rem; /* 48 */
  --space-6: 4rem; /* 64 */
  --space-7: 6rem; /* 96 */
  --space-8: 8rem; /* 128 */

  --container: 78rem;
  --measure: 65ch;

  /* ---- Ombre -------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(13, 44, 84, 0.06), 0 1px 3px rgba(13, 44, 84, 0.08);
  --shadow-md: 0 4px 12px rgba(13, 44, 84, 0.08), 0 2px 4px rgba(13, 44, 84, 0.06);
  --shadow-lg: 0 16px 40px rgba(13, 44, 84, 0.12), 0 4px 12px rgba(13, 44, 84, 0.08);
  --shadow-inverse: 0 24px 56px rgba(4, 15, 30, 0.5);

  /* ---- Motion ------------------------------------------------------------- */
  --dur-micro: 150ms;
  --dur-entrance: 520ms;
}

/* Riduzione del movimento — obbligatoria da 01_DESIGN_SYSTEM.md §4 */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}