/* mago-tokens.css — Design System Mago Cowork v2 (allineato a MagoWeb).
   Direttiva: V4 MagoWeb Full Match — sidebar blu uguale all'header MagoWeb, accenti verdi
   del logo, palette/tipografia coerenti. Mantiene compat con vecchi nomi token
   (--accent, --bg-main, ecc.) per non rompere CSS legacy nei componenti.
   Da caricare come ultimo CSS globale in App.razor.                                       */

:root {
  /* === BRAND ARANCIONE (CTA legacy MagoWeb, ora secondario per alert) === */
  --mw-orange-500: #F08C2E;
  --mw-orange-600: #E07820;
  --mw-orange-400: #F4A24E;
  --mw-orange-50:  #FFF4E8;
  --mw-orange-100: #FFE4C7;
  --mw-orange-200: #FBC998;

  /* === BLUE (header MagoWeb — usato per il rail dell'app) === */
  --mw-blue-700: #0A5A92;
  --mw-blue-600: #116CAE;
  --mw-blue-500: #1E80C8;
  --mw-blue-400: #4FA0DC;
  --mw-blue-100: #DCEEF7;
  --mw-blue-50:  #EFF7FB;

  /* === GREEN (logo "WEB" MagoWeb — accent di Cowork) === */
  --mw-green-500: #A9CA49;
  --mw-green-600: #92B539;
  --mw-green-400: #BFDA72;
  --mw-green-100: #EAF3D2;
  --mw-green-50:  #F4F8E5;

  /* === NEUTRI === */
  --mw-bg:        #F5F7FA;
  --mw-surface:   #FFFFFF;
  --mw-surface-2: #FAFBFC;
  --mw-border:    #E3E7EC;
  --mw-border-2:  #EEF1F4;
  --mw-divider:   #F0F2F5;

  --mw-ink-900:  #1A2A3D;
  --mw-ink-800:  #2C3E55;
  --mw-ink-700:  #4A5868;
  --mw-ink-500:  #7A8593;
  --mw-ink-400:  #9AA3B0;
  --mw-ink-300:  #B8BFC9;

  /* === SEVERITY === */
  --mw-critical:    #E64545;
  --mw-critical-bg: #FDECEC;
  --mw-warning:     #F0A826;
  --mw-warning-bg:  #FEF5E0;
  --mw-info:        #2D7FE0;
  --mw-info-bg:     #E6F0FB;
  --mw-success:     #2BA66B;
  --mw-success-bg:  #E3F4EB;

  /* === TIPOGRAFIA === */
  --mw-font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mw-font-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --mw-font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --mw-text-xs:   11px;
  --mw-text-sm:   12px;
  --mw-text-base: 13px;
  --mw-text-md:   14px;
  --mw-text-lg:   16px;
  --mw-text-xl:   20px;
  --mw-text-2xl:  24px;
  --mw-text-3xl:  28px;

  /* === SPACING === */
  --mw-s-1: 4px; --mw-s-2: 8px; --mw-s-3: 12px;
  --mw-s-4: 16px; --mw-s-5: 20px; --mw-s-6: 24px;
  --mw-s-8: 32px; --mw-s-10: 40px; --mw-s-12: 48px;

  /* === RADII === */
  --mw-r-xs: 3px; --mw-r-sm: 4px; --mw-r-md: 6px;
  --mw-r-lg: 10px; --mw-r-xl: 14px; --mw-r-pill: 999px;

  /* === SHADOWS === */
  --mw-shadow-1: 0 1px 2px rgba(20,40,70,0.04), 0 1px 1px rgba(20,40,70,0.03);
  --mw-shadow-2: 0 2px 8px rgba(20,40,70,0.06), 0 1px 2px rgba(20,40,70,0.04);
  --mw-shadow-pop: 0 8px 24px rgba(20,40,70,0.10), 0 2px 6px rgba(20,40,70,0.06);
  --mw-ring-focus: 0 0 0 3px rgba(146,181,57,0.25);

  /* === COMPAT con vecchi nomi token (usati da CSS dei componenti esistenti) === */
  --bg-main:           var(--mw-bg);
  --bg-surface:        var(--mw-surface);
  --bg-surface-2:      var(--mw-surface-2);
  --text-primary:      var(--mw-ink-800);
  --text-secondary:    var(--mw-ink-500);
  --border-subtle:     var(--mw-border);
  --accent:            var(--mw-green-600);   /* era #F39200 arancione → ora verde MagoWeb */
  --accent-hover:      var(--mw-green-500);
  --accent-soft:       var(--mw-green-100);
  --brand-blue:        var(--mw-blue-600);
  --brand-orange:      var(--mw-orange-500);  /* mantenuto per alert/severity arancio */
  --brand-green:       var(--mw-green-500);
}

/* === DARK MODE: flip dei token globali. Tutti i CSS dei componenti che usano
       var(--bg-surface), var(--bg-main), var(--text-primary), var(--border-subtle)
       (e i vecchi --mw-*) ereditano dark automaticamente da qui. === */
body.dark-mode {
  --mw-bg:        #1a1a1a;
  --mw-surface:   #242424;
  --mw-surface-2: #2a2a2a;
  --mw-border:    #3a3a3a;
  --mw-border-2:  #333333;
  --mw-divider:   #2d2d2d;

  --mw-ink-900:  #f0f0f0;
  --mw-ink-800:  #e5e5e5;
  --mw-ink-700:  #d0d0d0;
  --mw-ink-500:  #a0a0a0;
  --mw-ink-400:  #808080;
  --mw-ink-300:  #606060;

  --mw-critical-bg: #3a1e1e;
  --mw-warning-bg:  #3a2e1c;
  --mw-info-bg:     #1c2c3f;
  --mw-success-bg:  #1c3a2a;

  /* I compat-alias si rivalutano automaticamente perché puntano ai --mw-* qui sopra. */
  --bg-main:       var(--mw-bg);
  --bg-surface:    var(--mw-surface);
  --bg-surface-2:  var(--mw-surface-2);
  --text-primary:  var(--mw-ink-800);
  --text-secondary: var(--mw-ink-500);
  --border-subtle: var(--mw-border);

  --mw-shadow-1:   0 1px 2px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.3);
  --mw-shadow-2:   0 2px 8px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
  --mw-shadow-pop: 0 8px 24px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.4);
}

body.dark-mode { background: var(--mw-bg); color: var(--mw-ink-800); }
body.dark-mode .cw-app { background: var(--mw-bg) !important; }

html, body {
  font-family: var(--mw-font-sans);
  font-size: var(--mw-text-base);
  color: var(--mw-ink-800);
  background: var(--mw-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.serif {
  font-family: var(--mw-font-serif);
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* === Override RAIL: navy scuro → blu MagoWeb, accent attivo verde === */
.cw-rail {
  background: var(--mw-blue-600) !important;
  border-right-color: var(--mw-blue-700) !important;
}
.cw-rail-logo {
  background: var(--mw-blue-700) !important;
  color: #fff !important;
  background-image: none !important;
}
.cw-rail-btn {
  color: rgba(255, 255, 255, 0.85) !important;
}
.cw-rail-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}
.cw-rail-btn.active,
.cw-rail-btn:is(a.active) {
  background: rgba(255, 255, 255, 0.14) !important;
  color: var(--mw-green-500) !important;
}
.cw-rail-btn.active::before,
.cw-rail-btn:is(a.active)::before {
  background: var(--mw-green-500) !important;
}

/* === Welcome chat: halo + icona da arancione a verde === */
.ai-welcome-icon,
.cw-login-icon,
.login-icon {
  background: var(--mw-green-100) !important;
  border-color: var(--mw-green-500) !important;
  color: var(--mw-green-600) !important;
}
.ai-welcome h3,
.cw-login-card h1,
.login-card h1 {
  font-family: var(--mw-font-serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em !important;
  color: var(--mw-ink-900) !important;
}
.cw-login-card h1 .accent,
.login-card h1 .accent {
  color: var(--mw-green-600) !important;
}

/* === Bottoni primari: arancione gradient → verde gradient === */
.btn-primary,
button.btn-primary,
.btn.btn-primary,
.ai-suggestion {
  background: linear-gradient(180deg, var(--mw-green-500) 0%, var(--mw-green-600) 100%) !important;
  border-color: var(--mw-green-600) !important;
  color: #fff !important;
}
.btn-primary:hover,
button.btn-primary:hover,
.btn.btn-primary:hover {
  background: linear-gradient(180deg, var(--mw-green-600) 0%, #7BA02E 100%) !important;
}

/* Suggestion chip: hover verde, niente fill pieno */
.ai-suggestion {
  background: var(--mw-surface) !important;
  border: 1px solid var(--mw-border) !important;
  color: var(--mw-ink-700) !important;
  box-shadow: var(--mw-shadow-1);
}
.ai-suggestion:hover {
  border-color: var(--mw-green-400) !important;
  background: var(--mw-green-50) !important;
  color: var(--mw-ink-900) !important;
}

/* === Composer send: cerchio verde === */
.btn-send,
.composer-send,
button[title*="Invia"],
button[aria-label*="Invia"] {
  background: var(--mw-green-600) !important;
  color: #fff !important;
  border-color: var(--mw-green-600) !important;
}
.btn-send:hover,
.composer-send:hover {
  background: var(--mw-green-500) !important;
}

/* === Focus ring globale verde === */
input:focus, textarea:focus, select:focus, .auth-form input:focus {
  outline: none !important;
  border-color: var(--mw-green-500) !important;
  box-shadow: var(--mw-ring-focus) !important;
}

/* === Sidebar conversazioni / contesto: tab evidenziate verde === */
.ai-session-active,
.ai-session.selected,
.ai-tab.active {
  background: var(--mw-green-100) !important;
  color: var(--mw-ink-900) !important;
}

/* === Headers pagina: serif === */
h1.page-title, .page-title h1, .ai-welcome h3 {
  font-family: var(--mw-font-serif) !important;
}

/* === Badge severity: nuovi colori === */
.badge-critical, .ai-badge-critical { color: var(--mw-critical) !important; background: var(--mw-critical-bg) !important; }
.badge-warning,  .ai-badge-warning  { color: #B27013 !important; background: var(--mw-warning-bg) !important; }
.badge-info,     .ai-badge-info     { color: var(--mw-info) !important; background: var(--mw-info-bg) !important; }
.badge-success,  .ai-badge-success,
.badge-new                          { color: #2D7A36 !important; background: var(--mw-success-bg) !important; }
.badge-count {
  background: var(--mw-green-600) !important; color: #fff !important;
}

/* === Login page brand title: "mago" blu, "cowork" verde === */
.login-card h1 .accent { color: var(--mw-green-600) !important; }
.btn-primary i { color: inherit; }

/* Coerenza padding e card */
.cw-app { background: var(--mw-surface) !important; }

/* === Command Palette (Ctrl/⌘K): header navy → blu MagoWeb, accent verde === */
.cp-input-wrap { background: var(--mw-blue-600) !important; border-bottom-color: var(--mw-blue-700) !important; }
.cp-input { color: #f4f6fb !important; }
.cp-input::placeholder { color: rgba(255,255,255,0.65) !important; }
.cp-input-icon { color: var(--mw-green-500) !important; }
.cp-empty i { color: var(--mw-green-600) !important; }
.cp-item.active { box-shadow: inset 3px 0 0 var(--mw-green-600) !important; background: var(--mw-green-50) !important; }
.cp-item-icon { color: var(--mw-green-600) !important; }
.cp-item.active .cp-item-enter { color: var(--mw-green-600) !important; }
.cp-modal { border-color: var(--mw-border) !important; box-shadow: var(--mw-shadow-pop) !important; }
.cp-input { font-family: var(--mw-font-sans) !important; }

/* === AmbientChat toggle (linguetta laterale destra): blu MagoWeb + accent verde === */
.amb-toggle {
  border-color: var(--mw-blue-700) !important;
  background: var(--mw-blue-600) !important;
  color: var(--mw-green-500) !important;
}
.amb-toggle:hover {
  background: var(--mw-green-500) !important;
  color: var(--mw-blue-700) !important;
  border-color: var(--mw-green-500) !important;
}
.amb-panel-header { border-bottom-color: var(--mw-border-2) !important; }

/* Dark mode: tieni la base ma aggiusta accents */
body.dark-mode .cw-rail { background: #0d4970 !important; }
body.dark-mode .cw-rail-btn.active { color: var(--mw-green-400) !important; }
body.dark-mode .ai-welcome-icon { background: rgba(169,202,73,0.15) !important; border-color: var(--mw-green-500) !important; }
body.dark-mode .amb-toggle { background: var(--mw-blue-700) !important; color: var(--mw-green-400) !important; border-color: var(--mw-blue-700) !important; }
body.dark-mode .amb-toggle:hover { background: var(--mw-green-500) !important; color: var(--mw-blue-700) !important; }
body.dark-mode .cp-input-wrap { background: var(--mw-blue-700) !important; border-bottom-color: var(--mw-blue-700) !important; }
body.dark-mode .cp-input-icon { color: var(--mw-green-500) !important; }