/* Design Tokens — Il Riccio Parlante
   Fonte di verità: site-output/design-direction.md (Editorial / Magazine — "Carta & Inchiostro")
   Caricato globalmente (link in __root). Nessun hex hardcoded nei componenti: usare var(--*). */

:root {
  /* ── Palette (light) ── */
  --color-background: #fbf9f4; /* carta calda */
  --color-surface: #f0ece1; /* banda sezione (livello 1) — più marcata per staccare dal bg */
  --color-card: #fffdf9; /* card (livello 2) — bianco caldo */
  --color-text: #1a1a18; /* inchiostro */
  --color-muted: #6b6459; /* meta: autore/data/tempo */
  --color-primary: #b4532a; /* terracotta cotto */
  --color-primary-contrast: #fbf9f4;
  --color-accent: #5a6b5d; /* salvia */
  --color-link: #9a4420; /* terracotta scura (AA su carta) */
  --color-border: rgba(26, 26, 24, 0.12);
  --color-overlay: rgba(26, 26, 24, 0.55);

  /* ── Typography ── */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --text-small: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --text-body: clamp(1.05rem, 1rem + 0.3vw, 1.1875rem);
  --text-h3: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem);
  --text-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.6rem);
  --text-h1: clamp(2.25rem, 1.7rem + 2.6vw, 3.4rem);
  --text-hero: clamp(2.75rem, 1.9rem + 4vw, 4.5rem);

  --leading-display: 1.08;
  --leading-heading: 1.2;
  --leading-body: 1.65;
  --tracking-display: -0.02em;
  --tracking-kicker: 0.08em;
  --measure-read: 68ch;

  /* ── Spacing & rhythm ── */
  --space-compact: 4rem; /* 64px */
  --space-standard: 6rem; /* 96px */
  --space-generous: clamp(5rem, 3rem + 6vw, 8.75rem); /* up to 140px */
  /* ── Ritmo sezioni (Direzione A): fisso e più stretto ── */
  --s-section: 5rem; /* gap verticale tra sezioni */
  --s-section-head: 1.75rem; /* header di sezione → contenuto */

  /* ── Easing ── */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);

  /* ── Motion timing ── */
  --duration-micro: 180ms;
  --duration-underline: 260ms;
  --duration-entrance: 700ms;
  --stagger-child: 90ms;

  /* ── Elevation (warm-tinted) ── */
  --shadow-sm: 0 1px 2px rgb(26 26 24 / 0.05);
  --shadow-md: 0 8px 30px rgb(26 26 24 / 0.08);
  --shadow-lg: 0 20px 50px rgb(26 26 24 / 0.12);

  /* ── DNA: Spina & Foglio ── */
  --radius: 6px;
  --clip-notch: polygon(0 14px, 14px 0, 100% 0, 100% 100%, 0 100%);
  --quill-thickness: 2px;
}

[data-theme="dark"] {
  --color-background: #16150f;
  --color-surface: #221f17; /* banda (livello 1), più marcata del bg #16150f */
  --color-card: #2a2720; /* card (livello 2), più chiara della banda */
  --color-text: #ede9e0;
  --color-muted: #a39b8c;
  --color-primary: #d9794b;
  --color-primary-contrast: #16150f;
  --color-accent: #8aa08c;
  --color-link: #e0925f;
  --color-border: rgba(237, 233, 224, 0.14);
  --color-overlay: rgba(0, 0, 0, 0.65);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 8px 30px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 20px 50px rgb(0 0 0 / 0.55);
}