:root {
  /* Navy di brand, fisso in entrambi i temi: usato per fasce/hero che devono
     restare scure indipendentemente dal tema (a differenza di --color-primary,
     che invece si inverte per restare leggibile su sfondo scuro). */
  --color-ink: #0F172A;
  --color-on-ink: #FFFFFF;
  --color-on-ink-muted: #CBD5E1;
  --color-ink-border: #334155;

  --color-primary: #0F172A;
  --color-on-primary: #FFFFFF;
  --color-secondary: #334155;
  --color-on-secondary: #FFFFFF;
  --color-accent: #0369A1;
  --color-on-accent: #FFFFFF;
  --color-background: #F8FAFC;
  --color-foreground: #020617;
  --color-card: #FFFFFF;
  --color-card-foreground: #020617;
  --color-muted: #E8ECF1;
  --color-muted-foreground: #475569;
  --color-border: #E2E8F0;
  --color-destructive: #DC2626;
  --color-on-destructive: #FFFFFF;
  --color-valid: #15803D;
  --color-on-valid: #FFFFFF;
  --shadow: 0 8px 24px -14px rgba(2, 6, 23, 0.16);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #CBD5E1;
    --color-on-primary: #0B1220;
    --color-secondary: #94A3B8;
    --color-on-secondary: #0B1220;
    --color-accent: #38BDF8;
    --color-on-accent: #061420;
    --color-background: #0B1220;
    --color-foreground: #E6EBF2;
    --color-card: #121B2D;
    --color-card-foreground: #E6EBF2;
    --color-muted: #192437;
    --color-muted-foreground: #9FB0C9;
    --color-border: #223355;
    --color-destructive: #F2655B;
    --color-on-destructive: #1A0602;
    --color-valid: #4ADE80;
    --color-on-valid: #062012;
    --shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-primary: #CBD5E1;
  --color-on-primary: #0B1220;
  --color-secondary: #94A3B8;
  --color-on-secondary: #0B1220;
  --color-accent: #38BDF8;
  --color-on-accent: #061420;
  --color-background: #0B1220;
  --color-foreground: #E6EBF2;
  --color-card: #121B2D;
  --color-card-foreground: #E6EBF2;
  --color-muted: #192437;
  --color-muted-foreground: #9FB0C9;
  --color-border: #223355;
  --color-destructive: #F2655B;
  --color-on-destructive: #1A0602;
  --color-valid: #4ADE80;
  --color-on-valid: #062012;
  --shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --color-primary: #0F172A;
  --color-on-primary: #FFFFFF;
  --color-secondary: #334155;
  --color-on-secondary: #FFFFFF;
  --color-accent: #0369A1;
  --color-on-accent: #FFFFFF;
  --color-background: #F8FAFC;
  --color-foreground: #020617;
  --color-card: #FFFFFF;
  --color-card-foreground: #020617;
  --color-muted: #E8ECF1;
  --color-muted-foreground: #475569;
  --color-border: #E2E8F0;
  --color-destructive: #DC2626;
  --color-on-destructive: #FFFFFF;
  --color-valid: #15803D;
  --color-on-valid: #FFFFFF;
  --shadow: 0 8px 24px -14px rgba(2, 6, 23, 0.16);
  color-scheme: light;
}

* {
  box-sizing: border-box;
  min-width: 0;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: "Segoe UI", "Source Sans Pro", "Calibri", system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  text-wrap: balance;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.mono {
  font-family: "Consolas", "SFMono-Regular", "Courier New", monospace;
  font-variant-numeric: tabular-nums;
}

[hidden] {
  display: none !important;
}