/* ============================================================
   Vigilo — Design Tokens (v1)
   Linear-meets-Plausible. Italian B2B SaaS, sober & precise.
   ============================================================ */

:root {
  /* — primary scale — teal "vigilanza" — */
  --primary-50:  #ECFDF5;
  --primary-100: #D1FAE5;
  --primary-200: #A7F3D0;
  --primary-300: #6EE7B7;
  --primary-400: #34D399;
  --primary-500: #14B8A6;
  --primary-600: #0F766E;   /* canonical */
  --primary-700: #115E59;
  --primary-800: #134E4A;
  --primary-900: #042F2E;

  /* — neutrals — warm slate — */
  --n-0:   #FFFFFF;
  --n-25:  #FBFBFA;
  --n-50:  #F6F6F4;
  --n-75:  #F0F0ED;
  --n-100: #E9E9E5;
  --n-150: #DCDCD6;
  --n-200: #C9C9C2;
  --n-300: #A8A89F;
  --n-400: #7E7E74;
  --n-500: #5E5E55;
  --n-600: #45453E;
  --n-700: #32322D;
  --n-800: #232320;
  --n-900: #161614;
  --n-950: #0C0C0B;

  /* — semantic — */
  --success:  #16A34A;
  --success-bg: #ECFDF3;
  --warning:  #D97706;
  --warning-bg: #FEF6EC;
  --critical: #DC2626;
  --critical-bg: #FEF1F1;
  --info:     #2563EB;
  --info-bg:  #EEF4FE;

  /* — score gradient (per brief) — */
  --score-good: #16A34A;       /* 85-100 */
  --score-ok:   #65A30D;       /* 70-84 */
  --score-warn: #D97706;       /* 50-69 */
  --score-bad:  #DC2626;       /* 0-49 */

  /* — surfaces (light) — */
  --bg:           var(--n-25);
  --bg-elev:      var(--n-0);
  --bg-subtle:    var(--n-50);
  --bg-muted:     var(--n-75);
  --bg-hover:     var(--n-50);
  --border:       var(--n-100);
  --border-strong: var(--n-150);
  --fg:           var(--n-900);
  --fg-muted:     var(--n-500);
  --fg-subtle:    #6A6A61;             /* v1.1 — alzato da n-400/#7E7E74 per AA contrast su body text */
  --fg-on-primary: #FFFFFF;

  /* — radius — */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* — shadow — */
  --shadow-xs: 0 1px 1px rgba(20, 20, 18, 0.04);
  --shadow-sm: 0 1px 2px rgba(20, 20, 18, 0.06), 0 1px 1px rgba(20, 20, 18, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(20, 20, 18, 0.08), 0 2px 4px -2px rgba(20, 20, 18, 0.06);
  --shadow-lg: 0 12px 24px -8px rgba(20, 20, 18, 0.12), 0 4px 8px -4px rgba(20, 20, 18, 0.06);

  /* — type — */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* — density — */
  --row-h: 44px;
  --pad-card: 20px;
  --pad-section: 24px;
}

/* dark mode */
[data-theme="dark"] {
  --bg:           #0A0A09;
  --bg-elev:      #131312;
  --bg-subtle:    #1A1A18;
  --bg-muted:     #21211F;
  --bg-hover:     #1E1E1C;
  --border:       #262624;
  --border-strong: #34342F;
  --fg:           #F4F4F1;
  --fg-muted:     #9A9A91;
  --fg-subtle:    #6C6C63;

  --primary-600: #14B8A6;
  --primary-700: #0F766E;

  --success-bg: rgba(22, 163, 74, 0.12);
  --warning-bg: rgba(217, 119, 6, 0.12);
  --critical-bg: rgba(220, 38, 38, 0.14);
  --info-bg:    rgba(37, 99, 235, 0.12);

  --shadow-xs: 0 1px 1px rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 8px -2px rgba(0,0,0,0.55);
  --shadow-lg: 0 12px 24px -8px rgba(0,0,0,0.6);
}

/* density variants */
[data-density="compact"] {
  --row-h: 36px;
  --pad-card: 14px;
  --pad-section: 18px;
}
[data-density="airy"] {
  --row-h: 52px;
  --pad-card: 24px;
  --pad-section: 32px;
}

/* — base reset — */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
button { font-family: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, [role="tab"]:focus-visible {
  outline: 2px solid var(--primary-600);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
::selection { background: var(--primary-200); color: var(--primary-900); }
[data-theme="dark"] ::selection { background: var(--primary-700); color: #fff; }