/* ============================================================
   Hub Manutenzioni — Avigliano Umbro
   tokens.css — Design System v1.0
   
   Questo file definisce TUTTI i token del design system.
   Importarlo per primo, prima di qualunque altro CSS.
   Nessun valore arbitrario è ammesso nei file successivi:
   tutto deve passare da una variabile definita qui.
   ============================================================ */

/* ------------------------------------------------------------
   1. FONT IMPORTS
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');


/* ------------------------------------------------------------
   2. TOKEN ROOT (tema chiaro = default)
   ------------------------------------------------------------ */
:root {

  /* === COLORI — NEUTRI CALDI === */
  --color-bg:               #FAFAF7;
  --color-surface-1:        #FFFFFF;
  --color-surface-2:        #F4F4EF;
  --color-surface-3:        #EAEAE3;

  --color-border:           #E5E5DE;
  --color-border-strong:    #D4D4CB;
  --color-border-focus:     #0F5132;

  --color-text-1:           #1A1A17;
  --color-text-2:           #4A4A45;
  --color-text-3:           #8A8A82;
  --color-text-inverse:     #FAFAF7;

  /* === COLORI — ACCENT (Verde istituzionale Avigliano) === */
  --color-accent:           #0F5132;
  --color-accent-hover:     #0A3D24;
  --color-accent-active:    #082E1B;
  --color-accent-soft:      #E8F0EB;
  --color-accent-border:    #C5D9CC;

  /* === COLORI — SIDEBAR (sempre scura) === */
  --color-sidebar-bg:           #1A1A17;
  --color-sidebar-bg-hover:     #25251F;
  --color-sidebar-bg-active:    #0F5132;
  --color-sidebar-text:         #C5C5BD;
  --color-sidebar-text-active:  #FFFFFF;
  --color-sidebar-border:       #2A2A23;

  /* === COLORI — SEMANTICI === */
  --color-success:          #15803D;
  --color-success-soft:     #ECFDF3;
  --color-success-border:   #BBE6C8;

  --color-warning:          #B45309;
  --color-warning-soft:     #FEF6E7;
  --color-warning-border:   #F5D78A;

  --color-danger:           #B42318;
  --color-danger-soft:      #FEF0EE;
  --color-danger-border:    #F5C2BC;

  --color-info:             #1849A9;
  --color-info-soft:        #EEF4FF;
  --color-info-border:      #BFD3F2;


  /* === TIPOGRAFIA — FAMILIES === */
  --font-display:  'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:     'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     'DM Mono', 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* === TIPOGRAFIA — SCALE === */
  --text-2xs:   11px;
  --text-xs:    12px;
  --text-sm:    13px;
  --text-base:  14px;
  --text-md:    16px;
  --text-lg:    18px;
  --text-xl:    22px;
  --text-2xl:   28px;
  --text-3xl:   36px;

  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.55;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;


  /* === SPAZIATURE (scala 4px) === */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;


  /* === RAGGI === */
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    10px;
  --radius-xl:    14px;
  --radius-pill:  999px;


  /* === OMBRE (sottili, mai diffuse) === */
  --shadow-xs:  0 1px 2px rgba(26, 26, 23, 0.04);
  --shadow-sm:  0 1px 3px rgba(26, 26, 23, 0.06),
                0 1px 2px rgba(26, 26, 23, 0.04);
  --shadow-md:  0 4px 8px -2px rgba(26, 26, 23, 0.06),
                0 2px 4px -2px rgba(26, 26, 23, 0.04);
  --shadow-lg:  0 12px 20px -4px rgba(26, 26, 23, 0.08),
                0 4px 8px -2px rgba(26, 26, 23, 0.04);
  --shadow-xl:  0 24px 40px -8px rgba(26, 26, 23, 0.12),
                0 8px 16px -4px rgba(26, 26, 23, 0.06);


  /* === FOCUS RING (accessibilità) === */
  --ring-focus: 0 0 0 3px rgba(15, 81, 50, 0.18);


  /* === BORDI === */
  --border-thin:    1px solid var(--color-border);
  --border-medium:  1px solid var(--color-border-strong);


  /* === TRANSIZIONI === */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);

  --duration-fast:    120ms;
  --duration-normal:  200ms;
  --duration-slow:    320ms;

  --transition-fast:    all var(--duration-fast)   var(--ease-out);
  --transition-normal:  all var(--duration-normal) var(--ease-out);
  --transition-slow:    all var(--duration-slow)   var(--ease-out);


  /* === LAYOUT === */
  --layout-sidebar-w:            248px;
  --layout-sidebar-w-collapsed:  64px;
  --layout-header-h:             60px;
  --layout-content-max:          1440px;
  --layout-content-padding:      var(--space-6);


  /* === Z-INDEX === */
  --z-sidebar:  40;
  --z-header:   50;
  --z-dropdown: 60;
  --z-modal:    100;
  --z-toast:    200;


  /* === BREAKPOINTS (per riferimento, da usare in media query) === */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
}


/* ------------------------------------------------------------
   3. TEMA SCURO
   Attivato da app.js tramite: body.classList.toggle('theme-dark')
   ------------------------------------------------------------ */
body.theme-dark {
  --color-bg:               #0E0E0C;
  --color-surface-1:        #181815;
  --color-surface-2:        #22221E;
  --color-surface-3:        #2C2C27;

  --color-border:           #2A2A24;
  --color-border-strong:    #3A3A33;

  --color-text-1:           #F5F5F0;
  --color-text-2:           #B8B8B0;
  --color-text-3:           #6E6E66;
  --color-text-inverse:     #1A1A17;

  /* L'accent verde si schiarisce leggermente per restare leggibile */
  --color-accent:           #2E7D54;
  --color-accent-hover:     #3A9968;
  --color-accent-active:    #4AAB78;
  --color-accent-soft:      #1A2E22;
  --color-accent-border:    #2A4A38;

  /* Semantici scuri */
  --color-success-soft:     #14271C;
  --color-success-border:   #2A5238;
  --color-warning-soft:     #2A1E0A;
  --color-warning-border:   #5A4218;
  --color-danger-soft:      #2A0E0A;
  --color-danger-border:    #5A2018;
  --color-info-soft:        #0F1A30;
  --color-info-border:      #1F3460;

  /* Ombre più marcate su sfondo scuro */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4),
                0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 8px -2px rgba(0, 0, 0, 0.4),
                0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 12px 20px -4px rgba(0, 0, 0, 0.5),
                0 4px 8px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl:  0 24px 40px -8px rgba(0, 0, 0, 0.6),
                0 8px 16px -4px rgba(0, 0, 0, 0.4);

  --ring-focus: 0 0 0 3px rgba(46, 125, 84, 0.32);
}


/* ------------------------------------------------------------
   4. RESET MINIMALE + BASE TIPOGRAFICA
   (queste regole sono base, non override di componenti)
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-1);
  background: var(--color-bg);
  font-feature-settings: "kern", "liga", "calt";
}

/* H1–H6: solo reset, le classi semantiche danno lo stile */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text-1);
}

/* Display: per H1 di pagina e titoli istituzionali */
.text-display {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/* Mono: per ID, codici, riferimenti */
.text-mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}

/* Micro-label maiuscola */
.text-eyebrow {
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-3);
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: var(--transition-fast);
}
a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

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

/* Selezione testo */
::selection {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

/* Scrollbar discreta */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-bg);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-3);
}

/* Riduzione movimento per utenti che lo richiedono */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}