/*
 * Didaflow — primitive riusabili (classi helper, prosa, badge, callout, focus).
 * Richiede tokens.css. Origine: landing/shared/design/design-tokens.css (righe 280-397).
 */

html, body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── SEMANTIC TYPE ─────────────────────────────────────────
   Headings always Satoshi (structure). Body inherits sans by default;
   the editorial body swap is scoped to landing surfaces below.
   ────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--font-heading, var(--font-display));
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--heading);
  line-height: 1.2;
}

h1 { font-size: var(--display-1); }
h2 { font-size: var(--display-2); }
h3 { font-size: var(--display-3); }
h4 { font-size: var(--text-md); font-weight: 500; }

p { line-height: 1.625; }

/* AI markdown / editorial prose — Satoshi headings */
.chat-prose h1, .chat-prose h2, .chat-prose h3,
.df-prose h1, .df-prose h2, .df-prose h3 {
  font-family: var(--font-heading, var(--font-display));
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Eyebrow / tag */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--ink { color: var(--ink); }

/* Numeric / data display — ink for the institutional voice */
.numeric {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.numeric--data { color: var(--ink); font-weight: 600; }

/* Institutional badge — for ANVUR, Cineca, GDPR, audit, anno accademico */
.badge-institution {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--ink-tint);
  color: var(--ink-deep);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Code */
code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

/* Links */
a { color: inherit; text-underline-offset: 4px; }
a:hover { text-decoration: underline; }

/* Focus ring */
.focus-ring:focus-visible,
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Coral-tinted blockquote — the "insight callout" */
.callout {
  border-left: 3px solid var(--accent-hex);
  background: rgba(246, 230, 227, 0.4);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 12px 16px;
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: 1.55;
}
.callout em { color: var(--ink); font-style: italic; font-weight: 500; }

/* Ink-tinted callout — for data evidence, audit notes, institutional voice */
.callout--ink {
  border-left-color: var(--ink);
  background: rgba(230, 236, 243, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-base: 0.01ms;
    --duration-slow: 0.01ms;
  }
}


/* ─── SHARED UI FOUNDATION ──────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }