/* ==========================================================================
   Scintilla Studio — Design tokens
   Fonte: Brand Identity Book v1.0 (cap. 08-11), Strategy v3 (cap. 07).
   Unico punto in cui sono definiti colori, tipografia, spazi, raggi, ombre,
   contenitori, livelli e transizioni. I componenti usano solo questi token.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Colori di brand (valori esatti, Identity Book cap. 08) ---- */
  --carbone: #1B140D;   /* 60% — domina ogni superficie */
  --ember:   #FF7A3D;   /* 25% — guida ogni azione */
  --rame:    #C8622C;   /*  8% — la prova, il dato */
  --teal:    #39DDC4;   /*  5% — contrappeso razionale, puntuale */
  --crema:   #F6F0E6;   /*  2% — testo e dettagli chiari */

  /* ---- Scala tonale estesa (Identity Book cap. 09) ---- */
  --ember-900: #3A1A0C;
  --ember-700: #6E2E12;
  --ember-600: #E2581F;
  --ember-300: #FFA673;
  --ember-100: #FFD9C2;
  --teal-900:  #0A3329;
  --neutral-850: #231A11;  /* superficie 1 */
  --neutral-800: #2B2117;  /* superficie 2 */
  --neutral-700: #4A3B2B;  /* bordi forti */
  --neutral-500: #7D6C5A;  /* testo disattivato (solo decorativo) */
  --neutral-300: #B8AC9C;  /* testo secondario: 7.9:1 su carbone */

  /* ---- Ruoli semantici ---- */
  --bg: var(--carbone);
  --surface-1: var(--neutral-850);
  --surface-2: var(--neutral-800);
  --text: var(--crema);
  --text-muted: var(--neutral-300);
  --line: rgba(246, 240, 230, 0.12);
  --line-strong: rgba(246, 240, 230, 0.24);
  --accent: var(--ember);
  --accent-hover: var(--ember-300);
  --accent-ink: var(--carbone);       /* testo su ember: 7.6:1 */
  --proof: var(--rame);
  --focus: var(--teal);               /* focus visibile e distinto dall'azione */
  --danger: #FF6B6B;                  /* già in uso nel set icone (icona Chiudi) */
  --success: var(--teal);
  --draft: #F2C94C;                   /* solo nella build di anteprima */

  /* ---- Tipografia (Identity Book cap. 10-11) ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-h1: clamp(2.5rem, 1.55rem + 3.8vw, 4.25rem);     /* 40 → 68px */
  --fs-h2: clamp(2rem, 1.45rem + 2.2vw, 2.875rem);      /* 32 → 46px */
  --fs-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);    /* 22 → 28px */
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-body: 1rem;                                       /* 16px */
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;                                 /* 12px */
  --fs-stat: clamp(2.5rem, 1.8rem + 2.8vw, 4rem);

  --lh-tight: 1.08;
  --lh-head: 1.15;
  --lh-body: 1.65;
  --measure: 64ch;

  /* ---- Spazi (scala 4px) ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --section-y: clamp(4rem, 2.8rem + 4.5vw, 6.5rem);
  --gutter: clamp(1rem, 0.5rem + 2.4vw, 2.5rem);

  /* ---- Contenitori ---- */
  --container: 76rem;     /* 1216px */
  --container-narrow: 46rem;
  --container-wide: 88rem;

  /* ---- Raggi: regola unica ----
     azioni (pulsanti, pillole) = pill · superfici = 16px · campi = 10px */
  --r-pill: 999px;
  --r-surface: 16px;
  --r-field: 10px;

  /* ---- Ombre (tinte sul carbone, mai nero puro) ---- */
  --shadow-1: 0 1px 0 rgba(246, 240, 230, 0.04) inset, 0 12px 32px -16px rgba(10, 6, 2, 0.7);
  --shadow-2: 0 1px 0 rgba(246, 240, 230, 0.06) inset, 0 28px 60px -24px rgba(10, 6, 2, 0.85);

  /* ---- Livelli ---- */
  --z-base: 1;
  --z-header: 50;
  --z-menu: 60;
  --z-skip: 100;
  --z-grain: 90;

  /* ---- Header ---- */
  --header-h: 4.5rem;     /* 72px */

  /* ---- Transizioni ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t-base: 280ms;
  --t-slow: 700ms;
}

@media (max-width: 47.99rem) {
  :root { --header-h: 4rem; }
}