/* ============================================================
   STR4T0S Components — v1.0
   Baseline components for Apple-inspired layouts.
   All names semantic (no BEM, no prefix). Use data-* for variants.
   Depends on tokens.css being loaded first.
   ============================================================ */

/* ───── RESET (opinionated minimal) ───── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-page);
  font-feature-settings: 'cv11', 'ss01', 'kern';  /* Inter alternates */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: var(--accent-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out-quart);
}
a:hover { color: var(--accent-link-hover); text-decoration: underline; text-underline-offset: 3px; }

/* ───── TYPOGRAPHY ───── */
.display {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 8vw, var(--text-7xl));
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.headline {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

.subtitle {
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
}

.body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.body-large {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.caption {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-wide);
}

.label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-link);
  margin-bottom: var(--space-3);
}

/* ───── LAYOUT ───── */
.container {
  width: 100%;
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-narrow {
  width: 100%;
  max-width: var(--container-md);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(var(--space-16), 10vw, var(--space-32));
}

.section-tight {
  padding-block: clamp(var(--space-12), 6vw, var(--space-20));
}

.section[data-bg="elevated"] { background-color: var(--bg-elevated); }
.section[data-bg="surface"]  { background-color: var(--bg-surface); }
.section[data-bg="dark"]     { background-color: var(--neutral-900); color: var(--text-on-accent); }
.section[data-bg="dark"] .subtitle,
.section[data-bg="dark"] .caption,
.section[data-bg="dark"] .label,
.section[data-bg="dark"] .body { color: var(--neutral-300); }

/* ───── HERO ───── */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 80vh;
  padding-block: var(--space-24);
  padding-inline: var(--gutter);
  gap: var(--space-6);
}

.hero > .display { max-width: 18ch; }
.hero > .subtitle { max-width: 36ch; }

.hero-actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-6);
  flex-wrap: wrap;
  justify-content: center;
}

/* ───── BUTTONS ───── */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-full);
  transition: all var(--duration-base) var(--ease-out-quart);
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: var(--tracking-normal);
}

.button[data-variant="primary"] {
  background-color: var(--accent-link);
  color: var(--text-on-accent);
}
.button[data-variant="primary"]:hover {
  background-color: var(--accent-link-hover);
  transform: scale(1.02);
  text-decoration: none;
}

.button[data-variant="secondary"] {
  background-color: transparent;
  color: var(--accent-link);
  border: 1px solid var(--border-strong);
}
.button[data-variant="secondary"]:hover {
  background-color: var(--bg-elevated);
  text-decoration: none;
}

.button[data-variant="ghost"] {
  background-color: transparent;
  color: var(--accent-link);
  padding: 14px 16px;
}
.button[data-variant="ghost"]:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.button[data-size="sm"] { padding: 8px 18px; font-size: var(--text-sm); }
.button[data-size="lg"] { padding: 18px 36px; font-size: var(--text-lg); }

/* ───── CARDS ───── */
.card {
  background-color: var(--bg-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-out-quart),
              transform var(--duration-base) var(--ease-out-quart);
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card[data-tone="elevated"] { background-color: var(--bg-elevated); }
.card[data-tone="dark"]     { background-color: var(--neutral-900); color: var(--text-on-accent); }
.card[data-tone="bordered"] {
  box-shadow: none;
  border: 1px solid var(--border-subtle);
}
.card[data-tone="bordered"]:hover { box-shadow: var(--shadow-sm); }

.card-eyebrow { color: var(--text-secondary); margin-bottom: var(--space-2); }
.card-title   { margin-bottom: var(--space-3); }
.card-body    { color: var(--text-secondary); }

/* ───── FEATURE GRID ───── */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid[data-cols="2"] { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid[data-cols="3"] { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid[data-cols="4"] { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ───── KPI / METRIC ───── */
.kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  background-color: var(--bg-surface);
}

.kpi-value {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 5vw, var(--text-5xl));
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.kpi-label {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

/* ───── BADGE / TAG ───── */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-full);
  background-color: var(--bg-elevated);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-wide);
}

.tag[data-tone="positive"] { background-color: rgba(36, 138, 61, 0.10); color: var(--accent-positive); }
.tag[data-tone="negative"] { background-color: rgba(200, 37, 45, 0.10); color: var(--accent-negative); }
.tag[data-tone="warn"]     { background-color: rgba(178, 80, 0, 0.10);  color: var(--accent-warn); }
.tag[data-tone="info"]     { background-color: rgba(0, 102, 204, 0.10); color: var(--accent-link); }

/* ───── DIVIDER ───── */
.divider {
  height: 1px;
  background-color: var(--border-subtle);
  border: 0;
  margin-block: var(--space-12);
}

/* ───── NAV (sticky top bar) ───── */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--gutter);
  background-color: rgba(251, 251, 253, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}

/* Dark nav bg: due trigger (auto OS · forced via [data-theme="dark"]) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav {
    background-color: rgba(0, 0, 0, 0.72);
  }
}
:root[data-theme="dark"] .nav {
  background-color: rgba(0, 0, 0, 0.72);
}

.nav-brand {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
  text-decoration: none;
}
.nav-brand:hover { text-decoration: none; }

.nav-links {
  display: flex;
  gap: var(--space-6);
  list-style: none;
}

.nav-links a {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  opacity: 0.85;
  transition: opacity var(--duration-fast) var(--ease-out-quart);
}
.nav-links a:hover { opacity: 1; text-decoration: none; }

/* ───── THEME TOGGLE BUTTON ─────
   Pulsante circolare 36×36 in .nav.
   2 SVG (sun + moon) renderizzati entrambi; visibilità switchata via
   data-current-theme="light|dark" applicato da str4t0s.js.
   In light: mostra MOON (click → switch to dark)
   In dark:  mostra SUN  (click → switch to light)
*/
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: var(--space-4);
  border-radius: var(--radius-full);
  background-color: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out-quart),
              transform var(--duration-base) var(--ease-out-quart);
}

.theme-toggle:hover {
  background-color: var(--bg-elevated);
}

.theme-toggle:active {
  transform: scale(0.92);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity var(--duration-base) var(--ease-out-quart),
              transform var(--duration-base) var(--ease-out-quart);
}

/* Default (no data-current-theme set yet) — mostra moon, modalità light */
.theme-toggle .theme-toggle-sun  { display: none; }
.theme-toggle .theme-toggle-moon { display: block; }

/* Light: mostra moon (suggerisce switch to dark) */
.theme-toggle[data-current-theme="light"] .theme-toggle-sun  { display: none; }
.theme-toggle[data-current-theme="light"] .theme-toggle-moon { display: block; }

/* Dark: mostra sun (suggerisce switch to light) */
.theme-toggle[data-current-theme="dark"] .theme-toggle-sun  { display: block; }
.theme-toggle[data-current-theme="dark"] .theme-toggle-moon { display: none; }

/* ───── FOOTER ───── */
.footer {
  padding-block: var(--space-12);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ───── UTILITY ───── */
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-tight { gap: var(--space-2); }
.stack-loose { gap: var(--space-8); }

.row { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }

.mt-auto { margin-top: auto; }
.full-width { width: 100%; }

/* ───── REVEAL ON SCROLL (opt-in via str4t0s.js) ───── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-deliberate) var(--ease-out-expo),
              transform var(--duration-deliberate) var(--ease-out-expo);
}
.reveal[data-revealed="true"] {
  opacity: 1;
  transform: none;
}

/* ───── FOCUS STATES (WCAG-friendly) ───── */
:focus-visible {
  outline: 2px solid var(--accent-link);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.button:focus-visible {
  outline-offset: 4px;
}