/* Ratiofy Design System v4 — light + dark tokens
 * Changelog v3 → v4:
 * - 6 bande score (aggiunta --insolvency) con soglie definitive
 * - Alias di compatibilità per naming legacy del codebase
 * - Token flag severity (warning puntuali, distinti dallo score)
 * - Token feedback (success/warning/error/info bg+text)
 * - Token transizioni e layout (sidebar)
 * - Dark extension: sidebar, badge AI, flag severity, tooltip
 */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Type */
  --font-sans: 'Onest', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Radii */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px;

  /* Transitions */
  --transition-fast: 150ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 400ms ease-out;

  /* Layout */
  --sidebar-width: 220px;
  --sidebar-collapsed-width: 58px;

  /* Legacy naming aliases (compat con codebase esistente) */
  --color-border: var(--border);
  --color-text-muted: var(--ink-500);
  --color-text: var(--ink-900);
  --color-bg: var(--paper);
  --color-surface: var(--surface);
  --color-primary: var(--navy-900);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --font-family: var(--font-sans);
}

/* ================ LIGHT THEME (default) ================ */
:root, [data-theme="light"] {
  --paper:   #faf9f6;
  --surface: #ffffff;
  --surface-soft: rgba(255,255,255,0.75);
  --surface-alt: #f7f6f3;

  --ink-900: #1a1a24;
  --ink-800: #2a2a35;
  --ink-700: #3e3e4b;
  --ink-600: #5c5c6b;
  --ink-500: #7d7d8a;
  --ink-400: #a5a5b0;
  --ink-300: #c9c9d0;
  --ink-200: #e4e4e8;
  --ink-100: #efeff2;
  --ink-50:  #f7f6f3;

  --border: #e4e4e8;
  --border-soft: rgba(228,228,232,0.6);

  --navy-900: #1b2448;
  --navy-700: #2b3869;
  --navy-500: #4a5a94;

  /* ===== SCORE — 6 bande definitive =====
   * Soglie: 0-22 insolvency · 23-39 grave · 40-54 critico · 55-69 monitor · 70-88 buono · 89-100 ottimo
   * Hue armoniche: 355 (viola-rosso) → 15 → 40 → 80 → 155 → 195 (spettro caldo→freddo)
   */
  --insolvency:    oklch(52% 0.16 355);
  --insolvency-bg: oklch(95% 0.03 355);
  --grave:         oklch(62% 0.18 15);
  --grave-bg:      oklch(96% 0.03 15);
  --critico:       oklch(70% 0.15 40);
  --critico-bg:    oklch(96% 0.04 40);
  --monitor:       oklch(78% 0.14 80);
  --monitor-bg:    oklch(96% 0.05 85);
  --buono:         oklch(70% 0.12 155);
  --buono-bg:      oklch(96% 0.04 155);
  --ottimo:        oklch(66% 0.14 195);
  --ottimo-bg:     oklch(96% 0.04 195);

  --ai:        oklch(62% 0.18 290);
  --ai-soft:   oklch(92% 0.05 290);

  /* ===== FLAG severity — warning puntuali (distinti dallo score) =====
   * Usati per badge inline nei report (es. "documento scaduto", "dato mancante").
   * Saturazione più bassa dello score per evitare conflitto visivo.
   */
  --flag-critical: oklch(58% 0.14 15);
  --flag-critical-bg: oklch(95% 0.025 15);
  --flag-high:     oklch(66% 0.12 40);
  --flag-high-bg:  oklch(96% 0.03 40);
  --flag-medium:   oklch(75% 0.10 80);
  --flag-medium-bg:oklch(97% 0.03 85);
  --flag-low:      oklch(68% 0.09 155);
  --flag-low-bg:   oklch(97% 0.03 155);
  --flag-info:     oklch(64% 0.10 240);
  --flag-info-bg:  oklch(96% 0.03 240);

  /* ===== FEEDBACK — operazioni / form / toast ===== */
  --color-success-bg:  oklch(95% 0.04 155);
  --color-success-text: oklch(42% 0.12 155);
  --color-warning-bg:  oklch(95% 0.05 80);
  --color-warning-text: oklch(42% 0.11 60);
  --color-error-bg:    oklch(95% 0.04 25);
  --color-error-text:  oklch(45% 0.15 20);
  --color-info-bg:     oklch(95% 0.04 240);
  --color-info-text:   oklch(42% 0.12 240);

  /* ===== Score-aware backgrounds (pagina) ===== */
  --bg-insolvency: radial-gradient(ellipse at 15% 15%, oklch(93% 0.035 355) 0%, transparent 60%),
                   radial-gradient(ellipse at 90% 85%, oklch(94% 0.04 15) 0%, transparent 55%), var(--paper);
  --bg-grave:   radial-gradient(ellipse at 15% 15%, oklch(94% 0.04 15) 0%, transparent 60%),
                radial-gradient(ellipse at 90% 85%, oklch(94% 0.05 40) 0%, transparent 55%), var(--paper);
  --bg-critico: radial-gradient(ellipse at 15% 15%, oklch(95% 0.04 40) 0%, transparent 60%),
                radial-gradient(ellipse at 90% 85%, oklch(96% 0.04 80) 0%, transparent 55%), var(--paper);
  --bg-monitor: radial-gradient(ellipse at 15% 15%, oklch(95% 0.05 80) 0%, transparent 60%),
                radial-gradient(ellipse at 90% 85%, oklch(96% 0.04 155) 0%, transparent 55%), var(--paper);
  --bg-buono:   radial-gradient(ellipse at 15% 15%, oklch(95% 0.04 155) 0%, transparent 60%),
                radial-gradient(ellipse at 90% 85%, oklch(96% 0.04 195) 0%, transparent 55%), var(--paper);
  --bg-ottimo:  radial-gradient(ellipse at 15% 15%, oklch(95% 0.05 195) 0%, transparent 60%),
                radial-gradient(ellipse at 90% 85%, oklch(96% 0.04 240) 0%, transparent 55%), var(--paper);

  --aurora: radial-gradient(ellipse at 10% 20%, oklch(92% 0.06 80) 0%, transparent 55%),
            radial-gradient(ellipse at 85% 30%, oklch(92% 0.07 155) 0%, transparent 50%),
            radial-gradient(ellipse at 70% 90%, oklch(92% 0.06 290) 0%, transparent 55%),
            var(--paper);

  --shadow-sm: 0 1px 2px rgba(26,26,36,0.04), 0 1px 3px rgba(26,26,36,0.03);
  --shadow-md: 0 4px 12px rgba(26,26,36,0.05), 0 1px 3px rgba(26,26,36,0.04);
  --shadow-lg: 0 20px 40px -12px rgba(26,26,36,0.08), 0 4px 12px rgba(26,26,36,0.04);

  /* Sidebar (primary nav) */
  --sidebar-bg:   #1b2448;
  --sidebar-ink:  #e6e9f4;
  --sidebar-ink-muted: #8791b5;
  --sidebar-item-hover: rgba(255,255,255,0.06);
  --sidebar-item-active: rgba(255,255,255,0.12);
}

/* ================ DARK THEME ================ */
[data-theme="dark"] {
  --paper:   #13131c;
  --surface: #1b1b26;
  --surface-soft: rgba(27,27,38,0.7);
  --surface-alt: #1f1f2b;

  --ink-900: #f2f2f5;
  --ink-800: #e4e4ea;
  --ink-700: #c7c7d0;
  --ink-600: #9a9aa6;
  --ink-500: #7a7a87;
  --ink-400: #5e5e6b;
  --ink-300: #42424f;
  --ink-200: #2e2e3a;
  --ink-100: #232330;
  --ink-50:  #1a1a24;

  --border: #2e2e3a;
  --border-soft: rgba(46,46,58,0.6);

  --navy-900: #6b7ab8;
  --navy-700: #4a5a94;
  --navy-500: #2b3869;

  /* Score — 6 bande, leggermente più luminose su dark */
  --insolvency:    oklch(62% 0.15 355);
  --insolvency-bg: oklch(22% 0.04 355);
  --grave:         oklch(72% 0.15 15);
  --grave-bg:      oklch(22% 0.04 15);
  --critico:       oklch(76% 0.14 40);
  --critico-bg:    oklch(22% 0.04 40);
  --monitor:       oklch(82% 0.13 80);
  --monitor-bg:    oklch(22% 0.05 85);
  --buono:         oklch(76% 0.12 155);
  --buono-bg:      oklch(22% 0.04 155);
  --ottimo:        oklch(74% 0.13 195);
  --ottimo-bg:     oklch(22% 0.05 195);

  --ai:        oklch(72% 0.16 290);
  --ai-soft:   oklch(25% 0.06 290);

  /* Flag severity — desaturate su dark per evitare neon */
  --flag-critical: oklch(68% 0.12 15);
  --flag-critical-bg: oklch(22% 0.04 15);
  --flag-high:     oklch(74% 0.11 40);
  --flag-high-bg:  oklch(22% 0.04 40);
  --flag-medium:   oklch(80% 0.10 80);
  --flag-medium-bg:oklch(22% 0.04 85);
  --flag-low:      oklch(74% 0.09 155);
  --flag-low-bg:   oklch(22% 0.04 155);
  --flag-info:     oklch(72% 0.11 240);
  --flag-info-bg:  oklch(22% 0.04 240);

  /* Feedback */
  --color-success-bg:  oklch(22% 0.04 155);
  --color-success-text: oklch(80% 0.12 155);
  --color-warning-bg:  oklch(22% 0.05 80);
  --color-warning-text: oklch(82% 0.12 80);
  --color-error-bg:    oklch(22% 0.04 25);
  --color-error-text:  oklch(74% 0.14 20);
  --color-info-bg:     oklch(22% 0.04 240);
  --color-info-text:   oklch(78% 0.12 240);

  /* Dark bg score-aware — contenuti, solo un alone */
  --bg-insolvency: radial-gradient(ellipse at 15% 15%, oklch(20% 0.04 355) 0%, transparent 55%),
                   radial-gradient(ellipse at 90% 85%, oklch(20% 0.04 15) 0%, transparent 50%), var(--paper);
  --bg-grave:   radial-gradient(ellipse at 15% 15%, oklch(22% 0.04 15) 0%, transparent 55%),
                radial-gradient(ellipse at 90% 85%, oklch(22% 0.04 40) 0%, transparent 50%), var(--paper);
  --bg-critico: radial-gradient(ellipse at 15% 15%, oklch(22% 0.04 40) 0%, transparent 55%),
                radial-gradient(ellipse at 90% 85%, oklch(22% 0.04 80) 0%, transparent 50%), var(--paper);
  --bg-monitor: radial-gradient(ellipse at 15% 15%, oklch(22% 0.05 80) 0%, transparent 55%),
                radial-gradient(ellipse at 90% 85%, oklch(22% 0.04 155) 0%, transparent 50%), var(--paper);
  --bg-buono:   radial-gradient(ellipse at 15% 15%, oklch(22% 0.04 155) 0%, transparent 55%),
                radial-gradient(ellipse at 90% 85%, oklch(22% 0.04 195) 0%, transparent 50%), var(--paper);
  --bg-ottimo:  radial-gradient(ellipse at 15% 15%, oklch(22% 0.05 195) 0%, transparent 55%),
                radial-gradient(ellipse at 90% 85%, oklch(22% 0.04 240) 0%, transparent 50%), var(--paper);

  --aurora: radial-gradient(ellipse at 10% 20%, oklch(25% 0.04 80) 0%, transparent 55%),
            radial-gradient(ellipse at 85% 30%, oklch(25% 0.05 155) 0%, transparent 50%),
            radial-gradient(ellipse at 70% 90%, oklch(25% 0.05 290) 0%, transparent 55%), var(--paper);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.25);
  --shadow-lg: 0 20px 40px -12px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);

  /* Sidebar — tinta blu fredda più scura del navy light */
  --sidebar-bg:   #141a2e;
  --sidebar-ink:  #d7dcee;
  --sidebar-ink-muted: #6a7598;
  --sidebar-item-hover: rgba(255,255,255,0.04);
  --sidebar-item-active: rgba(107,122,184,0.18);
}

/* ================ BASE ================ */
* { box-sizing: border-box; }
body {
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--ink-50);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: var(--font-mono); }
.num  { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.label-xs {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-500);
}

/* ================ LOGO ================ */
.logo {
  display: inline-flex; align-items: baseline; gap: 2px;
  font-family: var(--font-sans); color: var(--ink-900); line-height: 1;
}
.logo-mono .r { font-weight: 700; letter-spacing: -0.03em; }
.logo-mono .tail { font-weight: 400; color: var(--ink-600); letter-spacing: -0.02em; }
.logo-mono .ai {
  font-family: var(--font-mono); font-size: 0.42em; font-weight: 500;
  transform: translateY(-0.9em);
  padding: 2px 5px; border: 1px solid var(--ink-300); border-radius: 4px;
  color: var(--ink-700); margin-left: 3px;
}

/* ================ CHIPS / BUTTONS / CARDS ================ */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 500;
  background: var(--ink-100); color: var(--ink-700);
  border: 1px solid transparent;
}
.chip--outline { background: transparent; border-color: var(--ink-300); }
.chip--ai { background: var(--ai-soft); color: var(--ai); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-full);
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  background: var(--surface); color: var(--ink-800);
  border: 1px solid var(--border); cursor: pointer;
  transition: all var(--transition-fast);
}
.btn:hover { border-color: var(--ink-400); }
.btn--primary { background: var(--navy-900); color: var(--paper); border-color: var(--navy-900); }
.btn--ghost { background: transparent; border-color: transparent; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.card--soft {
  background: var(--surface-soft); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}