/* ══════════════════════════════════════════════
   YouDISC — tokens.css
   Design System v1 v0.1 (provvisorio, da stabilizzare in MP2+)
   Sezioni di riferimento: §3 tipografia, §4 cromia, §5 spazi,
   §6 raggi, §7 ombre, §8 breakpoint
   ══════════════════════════════════════════════ */

:root {
  /* ---------- §3 Tipografia ---------- */
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-sans: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --text-display: 32px;   --leading-display: 1.2;
  --text-h1: 28px;        --leading-h1: 1.3;
  --text-h2: 24px;        --leading-h2: 1.3;
  --text-h3: 20px;        --leading-h3: 1.3;
  --text-body-lg: 18px;   --leading-body-lg: 1.5;
  --text-body: 16px;      --leading-body: 1.5;
  --text-small: 14px;     --leading-small: 1.4;
  --text-micro: 12px;     --leading-micro: 1.4;

  /* ---------- §4 Cromia (semantica, niente token DISC) ---------- */
  /* Sfondi e superfici */
  --color-background: #FAF8F4;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F5F2EC;

  /* Testo */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #5A5A5A;
  --color-text-on-action: #FFFFFF;

  /* Azioni */
  /* action-primary: scelta provvisoria #2C2C2C (alternativa #1F3A5F),
     da decidere in MP2 al primo render */
  --color-action-primary: #2C2C2C;
  --color-action-primary-hover: #1A1A1A;
  --color-action-disabled: #C4C4C4;
  --color-action-secondary: var(--color-text-primary);

  /* Brand e accenti */
  /* --color-accent-brand: terracotta editoriale Release 2 PDF (R2-T1g, ufficiale).
     --color-accent-brand-soft: tinta tenue del brand calcolata come 12% del brand
     miscelato su #FFFFFF — usata come background dello stato selected delle option-card
     (form_section1/2). Calcolo: 0x8B*.12 + 0xFF*.88 = 241 → 0xF1; etc.
     --color-accent-brand-hover: shift -12 luminanza dal brand, scelto in MP3.1. */
  --color-accent-brand: #8B3A2E;
  --color-accent-brand-soft: #F1E7E6;
  --color-accent-brand-hover: #6B2D22;

  /* Bordi e divisori */
  --color-border: #E0DDD6;
  --color-border-strong: var(--color-action-primary);

  /* Stati di feedback */
  --color-state-error: #C44545;
  --color-state-success: #4A8A5C;
  --color-state-warning: #D4923A;
  --color-state-info: var(--color-text-secondary);

  /* ---------- §5 Spazi (sistema 8px) ---------- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  /* ---------- §6 Raggi ---------- */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* ---------- §7 Ombre ---------- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* ---------- §8 Breakpoint ---------- */
  --breakpoint-desktop: 1024px;
}