/* ============================================================
   Guitar Academy — Design Tokens
   Direzione visiva: antracite caldo · avorio · ambra/rame.
   File di riferimento visivo: /design-system.html
   ============================================================ */

:root {
  /* ---------- Colore: superfici chiare ---------- */
  --bg: #FBF7EF;            /* avorio — sfondo generale */
  --surface: #FFFFFF;       /* bianco caldo — card e pannelli */
  --ink: #191510;           /* nero caldo — testo primario */
  --ink-2: #45403A;         /* testo secondario */
  --muted: #756C60;         /* testo terziario / note */
  --line: #E9E0D0;          /* bordi sottili */
  --line-2: #DACEB9;        /* bordi marcati */

  /* ---------- Colore: superfici scure ---------- */
  --dark: #16120D;          /* base antracite caldo */
  --dark-2: #201A13;        /* card su scuro */
  --dark-3: #2A221A;        /* hover su scuro */
  --cream: #F5EEDF;         /* testo primario su scuro */
  --cream-2: #CFC4B1;       /* testo secondario su scuro */
  --dark-line: rgba(245, 238, 223, .16);

  /* ---------- Accento ambra / rame ---------- */
  --amber: #E08A2E;         /* accento — CTA su scuro, dettagli */
  --amber-hover: #CE7A1C;
  --amber-deep: #9C5713;    /* testo ambra su chiaro (AA) */
  --amber-tint: #F7E8D2;    /* fondo ambra chiaro */
  --on-amber: #221304;      /* testo su ambra */

  /* ---------- Stati ---------- */
  --danger: #A62B1F;
  --danger-tint: #F9E4E1;
  --success: #237A46;
  --success-tint: #E2F1E8;
  --focus: #B26A1D;

  /* ---------- Tipografia ---------- */
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-display: "Archivo", "Segoe UI", system-ui, Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --fs-micro: .75rem;
  --fs-small: .875rem;
  --fs-base: 1rem;
  --fs-lead: 1.125rem;
  --fs-h3: 1.3rem;
  --fs-h2: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem);
  --fs-hero: clamp(2.4rem, 1.4rem + 4.6vw, 4.15rem);
  --fs-display-2: clamp(2rem, 1.2rem + 3.4vw, 3.4rem);

  --lh-tight: 1.06;
  --lh-head: 1.14;
  --lh-body: 1.62;

  --track-kicker: .17em;

  /* ---------- Spazio ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ---------- Layout ---------- */
  --container: 1184px;
  --container-narrow: 820px;
  --pad-x: clamp(20px, 4vw, 32px);
  --head-h: 76px;

  /* ---------- Angoli e ombre ---------- */
  --r-1: 8px; --r-2: 14px; --r-3: 20px;
  --sh-1: 0 1px 2px rgba(25, 21, 16, .05), 0 2px 10px rgba(25, 21, 16, .04);
  --sh-2: 0 2px 6px rgba(25, 21, 16, .06), 0 18px 40px -18px rgba(25, 21, 16, .22);
  --ring: 0 0 0 3px var(--focus);

  /* ---------- Transizioni ---------- */
  --t-fast: 160ms ease;
  --t-med: 260ms cubic-bezier(.2, .7, .3, 1);

  /* ---------- Z ---------- */
  --z-head: 60;
  --z-menu: 50;
}

/* Tema scuro ad alta leggibilità riservato alle sezioni scure */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-1); }