/* Ratiofy Design System v4 — light + dark theme tokens
 * OWNER OF ALL THEME-DEPENDENT TOKENS (color, ink, score, paper, surface, navy,
 * sidebar bg, shadow, overlays, ai, flag, feedback, V5 hair/brand/topbar).
 *
 * Sess 154 (2026-05-27): extracted theme-invariant tokens (radii, transitions,
 * spacing, font family/weight/size, motion, layout, sidebar widths, legacy aliases)
 * to /assets/css/tokens.css (closes DEC-S150-007 known-debt — drift 3 system.css
 * → 2 system.css + 1 tokens.css canonical L1 token layer).
 *
 * REGOLA cascade: tokens.css DEVE essere caricato PRIMA di system.css negli HTML.
 *
 * Other CSS files (ratiofy.css legacy, page-specific dashboard-v4/report-v4/admin/
 * report/report-digital) reference these via var(). Do NOT redeclare.
 *
 * 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)
 * - Dark extension: sidebar, badge AI, flag severity, tooltip
 *
 * Changelog POST33-1 (sessione 51, 2026-04-26):
 * - Aggiunti 11 overlay tokens (--overlay-white-*, --overlay-navy-*, --overlay-black-*)
 *   per sostituire rgba() hardcoded in ratiofy.css legacy (sidebar, autocomplete, modal scrim)
 * - Aggiunti 2 navy variants (--navy-600 auth gradient, --navy-950 dark deep gradient)
 * - Aggiunto --badge-accent-light per sidebar badge (.sidebar-badge in ratiofy.css)
 *
 * Changelog POST33-2 P0 (sessione 52, 2026-04-26):
 * - Aggiunto --color-primary-dark (alias var(--navy-950)) per sostituire fallback
 *   hardcoded #0F1F33 attivo prod a ratiofy.css linea 1922 #sidebar-placeholder
 * - Aggiunti --sidebar-badge-success-{bg,border} per risolvere TODO 408 ratiofy.css
 * - Aggiunto --shadow-tooltip per risolvere TODO 1545 ratiofy.css
 *
 * Changelog POST33-2 E5.0.5 (token migration sweep, 2026-04-27):
 * - Aggiunti 9 color-* light + 6 score alias light (light block)
 * - Aggiunti 9 color-* dark + 6 score alias dark (dark block)
 *
 * Changelog POST33-9 (D17 page-specific tokenization, 2026-04-27):
 * - Aggiunti 7 nuovi token (light + dark = 14 declarations) per page-specific CSS:
 *   --overlay-black-soft, --overlay-white-subtle (modal/admin)
 *   --color-ai-cta-bg, --color-ai-cta-text (AI panel CTA in report.css)
 *   --di-avatar-bg, --di-ai-text-color, --di-geo-grade-d-bg, --di-geo-grade-d-text (report-digital.css)
 * - 19 hex/rgba hardcoded rimossi da admin.css, report.css, report-digital.css
 *
 * Changelog sess 154 (2026-05-27): theme-invariant tokens estratti a tokens.css.
 *   @import Google Fonts + :root invariant block migrati. Theme blocks (light/dark)
 *   restano qui — non spostabili senza rompere dual-block dark mode.
 */

/* ================ 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);

  /* ===== OVERLAYS & TINTED SURFACES (POST33-1) =====
   * Semantici opacity: white/black overlay invariati tra light/dark.
   * Navy overlay riferito a navy-900 contesto-aware (cambia in dark).
   * Usati da ratiofy.css legacy per sidebar, autocomplete, modal scrim, focus ring soft.
   */
  --overlay-white-10: rgba(255,255,255,0.10);
  --overlay-white-18: rgba(255,255,255,0.18);
  --overlay-white-45: rgba(255,255,255,0.45);
  --overlay-white-75: rgba(255,255,255,0.75);
  --overlay-white-80: rgba(255,255,255,0.80);
  --overlay-navy-04:  rgba(30,58,95,0.04);
  --overlay-navy-05:  rgba(30,58,95,0.05);
  --overlay-black-45: rgba(0,0,0,0.45);

  /* Navy scale extension — variants assolute per gradient auth + dark deep */
  --navy-600: #1A4B70;
  --navy-950: #0d111a;

  /* Badge accent — sidebar pill (light + dark uguale, ratio AAA su sidebar dark) */
  --badge-accent-light: #8EF0B4;

  /* Sidebar badge success (POST33-2 E1.3 sostituisce TODO 408 ratiofy.css) */
  --sidebar-badge-success-bg: rgba(39,174,96,0.22);
  --sidebar-badge-success-border: rgba(39,174,96,0.35);

  /* Tooltip shadow (POST33-2 E3.4 sostituisce TODO 1545 ratiofy.css) */
  --shadow-tooltip: 0 6px 20px rgba(26,26,36,0.13);

  /* Sidebar section-nav active state (POST33-2 cleanup hex L568 globals.css) */
  --sidebar-nav-active-bg: rgba(29,78,216,0.3);
  --sidebar-nav-active-accent: #60a5fa;

  /* === POST33-9 page-specific tokens === */
  /* Modal overlay scrim (admin) */
  --overlay-black-soft: rgba(0,0,0,0.5);
  --overlay-white-subtle: rgba(255,255,255,0.04);

  /* AI panel CTA (report) */
  --color-ai-cta-bg: #f8f4ff;       /* light: pale purple */
  --color-ai-cta-text: #6d28d9;     /* light: violet 700 */

  /* Digital footprint (report-digital) */
  --di-avatar-bg: #E6F1FB;          /* light: pale blue */
  --di-ai-text-color: #3C3489;      /* light: deep indigo */
  --di-geo-grade-d-bg: #FDF0E0;     /* light: warm cream */
  --di-geo-grade-d-text: #A05A00;   /* light: dark amber */

  /* ===== Foundation tokens light (POST33-2 E5.0.5 sweep da ratiofy.css :root) ===== */
  --color-bg-card:       #FFFFFF;
  --color-bg-alt:        #F5F7FA;
  --color-bg-secondary:  var(--surface-alt);
  --color-bg-subtle:     #F7FAFC;
  --color-bg-sidebar:    #1E3A5F;
  --color-border-light:  #F0F3F7;
  --color-border-strong: #CBD5E0;
  --color-text-inverse:  #FFFFFF;
  --color-text-primary:  var(--ink-900);
  --color-primary-hover: #162C4A;
  --color-primary-light: #2A4F82;
  --color-accent:        #27AE60;
  /* Sess 94 BUG-94-2 fix: --color-teal definito (era undefined → riclass-tab.active
     bg:undefined + color:white → testo INVISIBILE bianco su bianco). Brand teal
     ratiofy = #319795 (derivato da rgba(49,151,149) box-shadow originale). */
  --color-teal:          #319795;
  --teal:                #319795;

  /* Score legacy alias light (re-pointing to oklch system.css tokens) */
  --score-excellent:  var(--ottimo);
  --score-good:       var(--buono);
  --score-sufficient: var(--monitor);
  --score-critical:   var(--critico);
  --score-grave:      var(--grave);
  --score-insolvency: var(--insolvency);

  /* ===== Wave C 4.2 — Compare module additions (15 token light) ===== */
  --accent-warm-1:    oklch(78% 0.16 80);
  --accent-warm-2:    oklch(72% 0.18 50);
  --accent-warm-glow: oklch(70% 0.18 70 / 0.6);
  --accent-warm-on:   oklch(20% 0.02 280);

  --cmpv2-hero-bg-1: oklch(15% 0.04 280);
  --cmpv2-hero-bg-2: oklch(22% 0.06 270);

  --overlay-white-08: rgba(255,255,255,0.08);
  --overlay-white-12: rgba(255,255,255,0.12);
  --overlay-white-15: rgba(255,255,255,0.15);
  --overlay-white-18: rgba(255,255,255,0.18);
  --overlay-white-55: rgba(255,255,255,0.55);
  --overlay-white-65: rgba(255,255,255,0.65);
  --overlay-white-85: rgba(255,255,255,0.85);

  --cmpv2-quadrant-pos: oklch(72% 0.14 155 / 0.06);
  --cmpv2-quadrant-neg: oklch(50% 0.18 15 / 0.06);

  /* ===== Wave C — Compare hi-fi composite tokens (T-C1, light) ===== */
  --accent-warm:         linear-gradient(135deg, oklch(72% 0.14 70), oklch(78% 0.12 50));
  --accent-warm-solid:   oklch(72% 0.14 70);
  --cmpv2-hero-bg:       linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 50%, var(--navy-500) 100%);
  --cmpv2-hero-text:     #ffffff;
  --cmpv2-quadrant-grid: var(--border-soft);
}

/* ================ 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);

  /* ===== OVERLAYS & TINTED SURFACES (POST33-1) =====
   * White/black overlay invariati (semantici opacity).
   * Navy overlay ricalcolato su navy-900 dark (#6b7ab8) per coerenza tinta.
   */
  --overlay-white-10: rgba(255,255,255,0.10);
  --overlay-white-18: rgba(255,255,255,0.18);
  --overlay-white-45: rgba(255,255,255,0.45);
  --overlay-white-75: rgba(255,255,255,0.75);
  --overlay-white-80: rgba(255,255,255,0.80);
  --overlay-navy-04:  rgba(107,122,184,0.04);
  --overlay-navy-05:  rgba(107,122,184,0.05);
  --overlay-black-45: rgba(0,0,0,0.45);

  --navy-600: #1A4B70;
  --navy-950: #0d111a;

  --badge-accent-light: #8EF0B4;

  /* Sidebar badge success — dark variant (opacity ridotta su sfondo navy scuro) */
  --sidebar-badge-success-bg: rgba(39,174,96,0.18);
  --sidebar-badge-success-border: rgba(39,174,96,0.30);

  /* Tooltip shadow — dark variant (più intensa su paper #13131c) */
  --shadow-tooltip: 0 6px 20px rgba(0,0,0,0.45);

  /* Sidebar section-nav active state — sidebar sempre navy quindi same value */
  --sidebar-nav-active-bg: rgba(29,78,216,0.3);
  --sidebar-nav-active-accent: #60a5fa;

  /* === POST33-9 page-specific tokens dark variants === */
  /* Modal overlay scrim — invariato */
  --overlay-black-soft: rgba(0,0,0,0.5);
  --overlay-white-subtle: rgba(255,255,255,0.04);

  /* AI CTA dark variant */
  --color-ai-cta-bg: var(--ai-soft);   /* dark-aware purple */
  --color-ai-cta-text: var(--ai);

  /* Digital footprint dark — desaturate */
  --di-avatar-bg: var(--surface-alt);
  --di-ai-text-color: oklch(75% 0.12 290);
  --di-geo-grade-d-bg: oklch(22% 0.04 60);
  --di-geo-grade-d-text: oklch(78% 0.13 60);

  /* Defense in depth: rialiasare esplicitamente legacy --color-text* per evitare
     race con ratiofy.css hardcoded (#1A202C/#2D3748/ecc) in load order instabile. */
  --color-text:          var(--ink-900);
  --color-text-dark:     var(--ink-900);
  --color-text-secondary:var(--ink-700);
  --color-text-muted:    var(--ink-500);

  /* Legacy semantic bg/text dark override (WCAG AA):
     ratiofy.css hardcoda #DBEAFE/#1E40AF/#D1FAE5/#065F46/#FEE2E2/#991B1B/#FEF3C7/#92400E/#EEEDFE/#534AB7.
     In light mode restano (alias già via --color-*). In dark servono equivalenti
     con contrast sufficiente (darker bg + lighter text). */
  --color-success-bg:  oklch(22% 0.04 155);
  --color-success-text:oklch(80% 0.12 155);
  --color-danger-bg:   oklch(22% 0.04 25);
  --color-danger-text: oklch(78% 0.14 20);
  --color-warning-bg:  oklch(22% 0.05 80);
  --color-warning-text:oklch(84% 0.12 80);
  --color-info-bg:     oklch(22% 0.04 240);
  --color-info-text:   oklch(80% 0.12 240);
  --color-ai-bg:       oklch(25% 0.06 290);
  --color-ai-text:     oklch(80% 0.12 290);

  /* ===== Foundation tokens dark (POST33-2 E5.0.5 sweep da ratiofy.css [data-theme=dark]) ===== */
  --color-bg-card:       var(--surface);
  --color-bg-alt:        var(--surface-alt);
  --color-bg-secondary:  var(--surface-alt);
  --color-bg-subtle:     var(--surface-alt);
  --color-bg-sidebar:    var(--sidebar-bg);
  --color-border-light:  var(--border-soft);
  --color-border-strong: var(--ink-400);
  --color-text-inverse:  var(--ink-50);
  --color-text-primary:  var(--ink-900);
  --color-primary-hover: var(--navy-700);
  --color-primary-light: var(--navy-500);
  --color-accent:        var(--ai);
  /* Sess 94 BUG-94-2 fix dark theme (consistent vs light theme #319795) */
  --color-teal:          #4FB3B0;
  --teal:                #4FB3B0;

  /* Score legacy alias dark (re-pointing to oklch dark-aware tokens) */
  --score-excellent:  var(--ottimo);
  --score-good:       var(--buono);
  --score-sufficient: var(--monitor);
  --score-critical:   var(--critico);
  --score-grave:      var(--grave);
  --score-insolvency: var(--insolvency);

  /* ===== Wave C 4.2 — Compare module additions (15 token dark, desaturate) ===== */
  --accent-warm-1:    oklch(74% 0.15 80);
  --accent-warm-2:    oklch(68% 0.17 50);
  --accent-warm-glow: oklch(68% 0.17 70 / 0.45);
  --accent-warm-on:   oklch(96% 0.01 280);

  --cmpv2-hero-bg-1: oklch(13% 0.05 280);
  --cmpv2-hero-bg-2: oklch(20% 0.07 270);

  --overlay-white-08: rgba(255,255,255,0.05);
  --overlay-white-12: rgba(255,255,255,0.08);
  --overlay-white-15: rgba(255,255,255,0.10);
  --overlay-white-18: rgba(255,255,255,0.12);
  --overlay-white-55: rgba(255,255,255,0.45);
  --overlay-white-65: rgba(255,255,255,0.55);
  --overlay-white-85: rgba(255,255,255,0.78);

  --cmpv2-quadrant-pos: oklch(72% 0.14 155 / 0.10);
  --cmpv2-quadrant-neg: oklch(60% 0.18 15 / 0.10);

  /* ===== Wave C — Compare hi-fi composite tokens (T-C1, dark) ===== */
  --accent-warm:         linear-gradient(135deg, oklch(78% 0.13 70), oklch(82% 0.11 50));
  --accent-warm-solid:   oklch(78% 0.13 70);
  --cmpv2-hero-bg:       linear-gradient(135deg, var(--navy-950) 0%, var(--navy-900) 50%, var(--navy-700) 100%);
  /* --cmpv2-hero-text + --cmpv2-quadrant-grid invariati (semantic, ereditati da :root light) */
}

/* ================ 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);
}

/* ================ ACCESSIBILITY ================
 * W4.A2 — Focus visible ring tokenizzato per keyboard navigation (WCAG 2.4.7).
 * Usa :focus-visible (NON :focus) per non outlinare al click mouse.
 * Token --ring derivato da --color-primary, override in dark per contrast.
 *
 * W4.A3 — prefers-reduced-motion override globale (WCAG 2.3.3).
 * Riduce a 0.01ms tutte le animation/transition/scroll, ma preserva final state.
 * Spinner essential restano visibili (1 iter) per feedback loading.
 */
:root, [data-theme="light"] { --ring: var(--navy-900); }
[data-theme="dark"] { --ring: var(--navy-700); }

*:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--r-sm, 4px);
}
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================ V5 IDENTITY TOKENS (sess 105, 2026-05-11) ================
 * Additive token layer per design v5 (handoff `design/design_handoff_ratiofy_v5_vanilla/`).
 * Tutti i nomi sono NUOVI (zero collisione prod). Componenti scopati in
 * `system-v5-overlay.css` opt-in. Token utilizzabili da qualsiasi pagina prod.
 *
 * Origine: audit additive sess 105 — tokens identità (topbar/sidebar overlay,
 * spine score-aware, hair dividers, brand mark) + utility primitives (.r-num,
 * .r-section, .r-stamp, .r-pulse, .r-spark, .r-shimmer-line).
 *
 * Override conflittuali (--sidebar-bg navy→paper) vivono in `system-v5-overlay.css`
 * scopati a `.app-shell` per non rompere sidebar prod legacy.
 */

:root, [data-theme="light"] {
  /* V5 layout */
  --topbar-h: 56px;
  --sidebar-w: 232px;

  /* V5 surfaces (translucent topbar + sidebar paper tonale) */
  --topbar-bg: rgba(255,255,255,0.72);
  --topbar-border: rgba(26,26,36,0.06);
  --sidebar-bg-soft: rgba(0,0,0,0.012);
  --sidebar-active-bg: var(--surface);
  --sidebar-active-ink: var(--ink-900);
  --sidebar-rule: var(--border-soft);

  /* V5 score-aware spine (recurring signature mark) */
  --spine: var(--ai);
  --spine-soft: var(--ai-soft);

  /* V5 dividers (hairline strokes, più tenui di --border) */
  --hair: rgba(26,26,36,0.07);
  --hair-strong: rgba(26,26,36,0.12);

  /* V5 typography per hero numbers */
  --num-display: 'Onest', ui-sans-serif, system-ui, sans-serif;

  /* V5 brand identity */
  --brand-ink: var(--ink-900);
  --brand-slash: var(--ai);
}

[data-theme="dark"] {
  --topbar-bg: rgba(27,27,38,0.72);
  --topbar-border: rgba(255,255,255,0.06);
  --sidebar-bg-soft: rgba(255,255,255,0.02);
  --sidebar-active-bg: var(--surface);
  --sidebar-active-ink: var(--ink-900);
  --sidebar-rule: var(--border-soft);
  --hair: rgba(255,255,255,0.07);
  --hair-strong: rgba(255,255,255,0.14);
  --brand-ink: var(--ink-900);
  --brand-slash: var(--ai);
}

/* ================ V5 UTILITY PRIMITIVES (additive, namespace .r-*) ================
 * Tipografia + sezioni + segnali. Riutilizzabili in tutte le pagine prod.
 * Zero override su prod (namespace .r-* mai usato finora). Cfr grep sess 105.
 */

.r-num {
  font-family: var(--num-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  font-weight: 700;
  line-height: 0.92;
}

.r-section {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair);
}
.r-section__kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-500);
}
.r-section__kicker::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--spine);
  margin-right: 8px;
  vertical-align: middle;
}
.r-section__title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0;
}
.r-section__sub {
  font-size: 13px;
  color: var(--ink-500);
  margin-left: auto;
}

.r-stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-500);
  letter-spacing: 0.04em;
}
.r-stamp::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--spine);
}

@keyframes r-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.4); opacity: 0.3; }
}
.r-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grave);
  position: relative;
}
.r-pulse::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--grave);
  animation: r-pulse 1.6s ease-in-out infinite;
}

.r-spark {
  stroke: var(--c, var(--ink-400));
  fill: none;
  stroke-width: 1.5;
}
.r-spark-area {
  fill: var(--c, var(--ink-400));
  opacity: 0.12;
}

@keyframes r-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.r-shimmer-line {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--ai) 30%,
    var(--ottimo) 50%,
    var(--ai) 70%,
    transparent 100%);
  background-size: 200% 100%;
  opacity: 0.5;
  animation: r-shimmer 6s linear infinite;
}