@import url('tokens.css');

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

h1 { font-size: var(--text-4xl); font-weight: 700; }
h2 { font-size: var(--text-2xl); font-weight: 700; }
h3 { font-size: var(--text-xl); font-weight: 600; }

a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); text-decoration: underline; }

code, pre { font-family: var(--font-mono); font-size: var(--text-sm); }

.container { max-width: 960px; margin: 0 auto; padding: 0 var(--space-4); }

/* ---- Navbar ---- */
.navbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.navbar .brand { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--color-brand); }
.navbar nav a { margin-left: var(--space-4); color: var(--color-text-muted); font-weight: 600; }
.navbar nav a:hover { color: var(--color-link); text-decoration: none; }

.footer {
  padding: var(--space-8) var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

/* ---- CTA primaria — l'unico rosso pieno della schermata ---- */
.btn-primary {
  background: var(--color-brand); color: #fff; font-family: var(--font-sans); font-weight: 600;
  padding: var(--space-3) var(--space-6); border: 0; border-radius: var(--radius-sm); cursor: pointer;
  font-size: var(--text-base);
}
.btn-primary:hover { background: var(--color-brand-hover); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Bottone secondario — blu istituzionale, outline ---- */
.btn-secondary {
  background: transparent; color: var(--color-link); border: 2px solid currentColor;
  border-radius: var(--radius-sm); padding: calc(var(--space-3) - 2px) var(--space-6); font-weight: 600;
  cursor: pointer; font-size: var(--text-base);
}

/* ---- Blocco di contenuto generato da AI ---- */
.ai-block {
  background: var(--color-ai-subtle);
  border: 1px solid var(--color-ai-border);
  border-left: 4px solid var(--color-ai);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  color: var(--color-text);
}
.ai-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-ai); color: #fff; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 2px var(--space-2); border-radius: var(--radius-full);
}

/* ---- Callout didattico ---- */
.callout-edu {
  background: var(--accent-50); border-left: 4px solid var(--color-accent);
  padding: var(--space-4); border-radius: var(--radius-sm);
}

/* ---- Card ---- */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-6);
}

/* ---- Form ---- */
input, select, textarea {
  font-family: var(--font-sans); font-size: var(--text-base); color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); width: 100%;
}
label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.form-group { margin-bottom: var(--space-4); }

/* ---- Focus globale ---- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm);
}