:root[data-theme="light"] {
  --color-app-bg:         #F2F5FA;
  --color-card:           #FFFFFF;
  --color-surface:        #E8EDF5;
  --color-sidebar:        #0F1F38;
  --color-nav-bg:         #09152A;
  --color-text-primary:   #0F1F38;
  --color-text-secondary: #3D5370;
  --color-text-muted:     #7088A8;
  --color-text-disabled:  #A8BCCC;
  --color-accent:         #2472E8;
  --color-accent-hover:   #1259C4;
  --color-accent-light:   #EAF1FC;
  --color-accent-mid:     #4A90F0;
  --color-border:         #D0DAE8;
  --color-input-bg:       #FFFFFF;
  --color-input-border:   #BBC8D8;
  --color-row-hover:      #F5F8FD;
  --color-sidebar-text:   #9AAEC4;
  --color-sidebar-active: #FFFFFF;

  /* Stati semantici — usati da form__error, form__feedback, success__*, pi-banner, btn--danger, ecc.
     Per ogni stato: bg (sfondo box), fg (testo principale), border (contorno).
     Per success c'è anche icon-bg/icon-fg perché l'icona vive su uno sfondo più tenue. */
  --color-success-bg:     #DEF0EB;
  --color-success-fg:     #1F6E54;
  --color-success-border: #B7DCCB;
  --color-success-icon-bg:#DEF0EB;
  --color-success-icon-fg:#2D8A6A;

  --color-error-bg:       #FCEBEB;
  --color-error-fg:       #B82F2E;
  --color-error-border:   #F3D0D0;

  --color-warning-bg:     #FFF3CD;
  --color-warning-fg:     #7A4A00;
  --color-warning-border: #FAEEDA;
  --color-warning-icon:   #BA7517;

  --color-danger:         #E24B4A;
  --color-danger-hover:   #C73E3D;
  --color-danger-bg:      #FFF7F7;
  --color-danger-border:  #F5C5C5;
}

:root[data-theme="dark"] {
  /* Palette Cloudflare-flavored (2026-06-01): true black + cool tint, border definiti,
     input più scuri del card (incassati), sidebar = body bg (separazione via border),
     accent #2472E8 invariato. Vedi affinamento UI/UX punto D. */
  --color-app-bg:         #0A0A0A;
  --color-card:           #131517;
  --color-surface:        #1C1F23;
  --color-sidebar:        #0B1729;       /* navy più scuro del light, mantiene la tinta brand ma "spenta" per il dark */
  --color-nav-bg:         #060E1C;       /* sotto-tono navy coerente con la sidebar */
  --color-text-primary:   #F5F7FA;       /* near-white, cool */
  --color-text-secondary: #A8B0BD;       /* cool blue-grey, +contrast vs muted */
  --color-text-muted:     #6E7681;       /* sopra soglia WCAG AA su card */
  --color-text-disabled:  #3A3F45;
  --color-accent:         #2472E8;       /* invariato */
  --color-accent-hover:   #4A90F0;
  --color-accent-light:   #122A4D;       /* leggermente più definito */
  --color-accent-mid:     #4A90F0;
  --color-border:         #2A2E33;       /* cool tint, più visibile */
  --color-input-bg:       #0F1114;       /* PIù SCURO del card → input "incassati" */
  --color-input-border:   #2A2E33;       /* allineato al border generale */
  --color-row-hover:      #1A1D21;
  --color-sidebar-text:   #A8B0BD;       /* allineato a text-secondary */
  --color-sidebar-active: #F5F7FA;       /* allineato a text-primary */

  /* Stati semantici (vedi commento in light) — adattati per tema scuro */
  --color-success-bg:     #0A2018;
  --color-success-fg:     #5DC9A0;
  --color-success-border: #1F4A38;
  --color-success-icon-bg:#0A2018;
  --color-success-icon-fg:#5DC9A0;

  --color-error-bg:       #2A1010;
  --color-error-fg:       #FD9595;
  --color-error-border:   #4A1818;

  --color-warning-bg:     #2A2010;
  --color-warning-fg:     #E6B975;
  --color-warning-border: #4A3818;
  --color-warning-icon:   #E6B975;

  --color-danger:         #E24B4A;
  --color-danger-hover:   #ED6E6D;
  --color-danger-bg:      #2A1010;
  --color-danger-border:  #5A2424;
}

:root {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --sidebar-width: 240px;
  --header-height: 60px;
  --footer-height: 48px;
}