/* ============================================================
   STRATUS SUITE — Design Tokens
   Coerente col sito (Direction A: emerald #3ECF8E · Inter + JetBrains Mono),
   ma adattato a un GESTIONALE ad alta densità: tema LIGHT di default,
   struttura semantica DARK-READY ([data-theme="dark"] rimappa ai valori del sito).
   Unico file: cambiare il tema della suite = modifica qui.
   Vincoli: CSS custom properties pure, nessun build step.
   ============================================================ */

:root {
  /* ---------- 1. PRIMITIVI: brand ---------- */
  --emerald:        #3ECF8E;   /* accento Stratus (fill, stati attivi, focus) */
  --emerald-hover:  #35BC80;
  --emerald-strong: #28A56E;   /* testo/accento su chiaro (contrasto AA) */
  --emerald-deep:   #133425;   /* verde brand profondo (heading accent, dark surface) */
  --emerald-contrast:#052012;  /* testo su fill emerald */
  --emerald-glow:   rgba(62,207,142,.45);

  /* ---------- 2. PRIMITIVI: neutri (cool slate, tinta verdastra minima) ---------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F9F8;
  --neutral-100: #F0F3F2;
  --neutral-200: #E3E8E6;
  --neutral-300: #CFD6D2;
  --neutral-400: #9BA7A1;
  --neutral-500: #6D7A73;
  --neutral-600: #4C564F;
  --neutral-700: #333C37;
  --neutral-800: #1E2621;
  --neutral-900: #0E1512;   /* = panel del sito: aggancia il tema dark */

  /* ---------- 3. PRIMITIVI: semantici (status ≠ brand) ---------- */
  --green:  #12A150;  --green-tint:  #E6F6ED;
  --amber:  #B9770A;  --amber-tint:  #FBF1DE;
  --red:    #D63B3B;  --red-tint:    #FBE9E9;
  --blue:   #2F6FEB;  --blue-tint:   #E7EEFD;

  /* ============================================================
     4. SEMANTICI — TEMA LIGHT (default)
     I componenti usano SOLO questi, mai i primitivi.
     ============================================================ */
  --bg-app:        var(--neutral-50);   /* canvas dell'app */
  --bg-surface:    var(--neutral-0);    /* card, pannelli, modali */
  --bg-surface-2:  var(--neutral-100);  /* header tabella, superficie sommersa */
  --bg-inset:      var(--neutral-0);    /* sfondo input */
  --bg-hover:      var(--neutral-100);
  --bg-active:     var(--neutral-200);
  --bg-accent-subtle: rgba(62,207,142,.10); /* tint emerald (badge/riga attiva) */

  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-accent: var(--emerald);

  --text:          #16211B;             /* testo primario */
  --text-muted:    var(--neutral-500);  /* secondario */
  --text-dim:      var(--neutral-400);  /* placeholder, disabilitato */
  --text-accent:   var(--emerald-strong);
  --text-on-accent:var(--emerald-contrast);

  /* stati semantici (fg + bg tint) */
  --success:  var(--green);  --success-bg: var(--green-tint);
  --warning:  var(--amber);  --warning-bg: var(--amber-tint);
  --danger:   var(--red);    --danger-bg:  var(--red-tint);
  --info:     var(--blue);   --info-bg:    var(--blue-tint);

  /* ---------- 5. TIPOGRAFIA ---------- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* scale (font-size) — base 14px per densità gestionale */
  --text-display: 40px;
  --text-h1:      30px;
  --text-h2:      24px;
  --text-h3:      19px;
  --text-body-lg: 16px;
  --text-body:    14px;
  --text-body-sm: 13px;
  --text-caption: 12px;
  --text-micro:   11px;

  --leading-tight: 1.12;
  --leading-snug:  1.3;
  --leading-normal:1.55;
  --leading-relaxed:1.65;

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

  --tracking-tight: -0.02em;   /* heading */
  --tracking-normal: 0;
  --tracking-wide:  0.02em;
  --tracking-label: 0.14em;    /* eyebrow/label mono uppercase */

  /* ---------- 6. SPACING (base 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;
  --space-24: 96px;

  /* ---------- 7. RADIUS ---------- */
  --radius-sm:   4px;    /* input, badge */
  --radius-md:   8px;    /* button, card piccole */
  --radius-lg:   12px;   /* modali, card grandi */
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ---------- 8. SHADOW (elevation — soft su light) ---------- */
  --shadow-sm: 0 1px 2px rgba(16,24,20,.06), 0 1px 1px rgba(16,24,20,.04);
  --shadow-md: 0 4px 12px -2px rgba(16,24,20,.10);
  --shadow-lg: 0 12px 32px -8px rgba(16,24,20,.16);
  --shadow-xl: 0 24px 60px -12px rgba(16,24,20,.22);
  --shadow-focus: 0 0 0 3px rgba(62,207,142,.35);

  /* ---------- 9. MOTION ---------- */
  --transition-fast: 150ms ease-out;
  --transition-base: 250ms cubic-bezier(.2,.7,.2,1);
  --transition-slow: 400ms cubic-bezier(.2,.7,.2,1);

  /* ---------- 10. Z-INDEX ---------- */
  --z-dropdown: 1000;  --z-sticky: 1010;  --z-modal-backdrop: 1040;
  --z-modal: 1050;     --z-toast: 1080;   --z-tooltip: 1090;

  color-scheme: light;
}

/* ============================================================
   TEMA DARK — rimappa SOLO i semantici ai valori del sito.
   Attivazione: <html data-theme="dark"> (toggle futuro).
   ============================================================ */
[data-theme="dark"] {
  --bg-app:        #070A09;
  --bg-surface:    #0E1512;
  --bg-surface-2:  #111A15;
  --bg-inset:      #0B110E;
  --bg-hover:      rgba(255,255,255,.04);
  --bg-active:     rgba(255,255,255,.08);
  --bg-accent-subtle: rgba(62,207,142,.12);

  --border:        rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.15);

  --text:          #EAF0EC;
  --text-muted:    #8C988F;
  --text-dim:      #5A675F;
  --text-accent:   var(--emerald);

  /* status: fg più luminoso, bg tint scuro trasparente */
  --success: #4ADE9B; --success-bg: rgba(74,222,155,.12);
  --warning: #E6B24D; --warning-bg: rgba(230,178,77,.12);
  --danger:  #F26D6D; --danger-bg:  rgba(242,109,109,.12);
  --info:    #6EA0F5; --info-bg:    rgba(110,160,245,.12);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 6px 18px -4px rgba(0,0,0,.6);
  --shadow-lg: 0 18px 44px -12px rgba(0,0,0,.7);
  --shadow-xl: 0 30px 80px -16px rgba(0,0,0,.85);

  color-scheme: dark;
}