/*
 * tokens.css
 * ─────────────────────────────────────────────────────────────
 * Design tokens centralizzati — UNICA fonte di verità per:
 * colori, tipografia, spacing, shadow, transizioni.
 *
 * Per modificare il brand: tocca SOLO questo file.
 * ─────────────────────────────────────────────────────────────
 */

:root {

  /* Forza sempre tema chiaro — ignora dark mode del sistema */
  color-scheme: light;

  /* ── PALETTE — Luce Veneziana (pastello raffinato) ──────── */

  /* Basi neutre calde */
  --c-ivory: #F9F6F1;
  /* bg primario */
  --c-linen: #EDE8DF;
  /* bg secondario, card */
  --c-parchment: #E4DDD3;
  /* hover states, bordi */
  --c-sand: #D0C8BB;
  /* bordi, divisori */
  --c-sand-dark: #B8AFA3;
  /* bordi forti */

  /* Accenti */
  --c-sage: #A8B5A2;
  /* accento verde salvia */
  --c-sage-dark: #8A9A84;
  --c-rose: #C8A99A;
  /* accento terracotta pastello */
  --c-rose-dark: #B8957F;
  --c-gold: #C4A882;
  /* oro antico — premium */
  --c-gold-dark: #A88E6A;
  --c-gold-light: #D8C4A8;

  /* Testo */
  --c-ink: #2D2926;
  /* testo primario — quasi nero caldo */
  --c-ink-mid: #5C554E;
  /* testo secondario */
  --c-ink-light: #8C857D;
  /* testo muted */
  --c-ink-faint: #B0A89F;
  /* placeholder, disabled */

  /* Bianco e overlay */
  --c-white: #FFFFFF;
  --c-black: #1A1715;
  --c-overlay: rgba(45, 41, 38, 0.5);

  /* ── PALETTE SEMANTICA (alias) ────────────────────────────── */
  --bg-primary: var(--c-ivory);
  --bg-secondary: var(--c-linen);
  --bg-card: var(--c-white);
  --bg-nav: rgba(249, 246, 241, 0.94);
  --bg-footer: var(--c-ink);

  --text-primary: var(--c-ink);
  --text-secondary: var(--c-ink-mid);
  --text-muted: var(--c-ink-light);
  --text-faint: var(--c-ink-faint);

  --border-light: var(--c-sand);
  --border-strong: var(--c-sand-dark);

  --accent: var(--c-rose);
  --accent-dark: var(--c-rose-dark);
  --accent-alt: var(--c-sage);
  --gold: var(--c-gold);
  --gold-dark: var(--c-gold-dark);

  /* ── TIPOGRAFIA ──────────────────────────────────────────── */

  --font-display: 'Cormorant Garamond', 'Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Courier New', Courier, monospace;

  /* Fluid type scale — clamp(min, preferred vw, max) */
  --fs-2xs: clamp(0.625rem, 1.2vw, 0.75rem);
  --fs-xs: clamp(0.75rem, 1.5vw, 0.8125rem);
  --fs-sm: clamp(0.875rem, 2vw, 0.9375rem);
  --fs-base: clamp(1rem, 2.2vw, 1.0625rem);
  --fs-md: clamp(1.0625rem, 2.4vw, 1.1875rem);
  --fs-lg: clamp(1.25rem, 2.8vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 3.5vw, 2rem);
  --fs-2xl: clamp(2rem, 4.5vw, 2.75rem);
  --fs-3xl: clamp(2.5rem, 6vw, 3.75rem);
  --fs-4xl: clamp(3rem, 8vw, 5rem);

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-base: 1.65;
  --lh-relaxed: 1.8;

  /* Letter spacing */
  --ls-tight: -0.02em;
  --ls-normal: 0em;
  --ls-wide: 0.06em;
  --ls-wider: 0.12em;
  --ls-widest: 0.2em;

  /* Font weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ── SPACING (8px grid) ──────────────────────────────────── */

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-28: 112px;
  --sp-32: 128px;

  /* ── LAYOUT ──────────────────────────────────────────────── */

  --max-w: 1320px;
  --max-w-narrow: 860px;
  --max-w-text: 68ch;
  --nav-h: 76px;
  --sidebar-w: 280px;

  /* Padding container responsive */
  --container-px: var(--sp-6);

  /* ── BORDI & RAGGI ───────────────────────────────────────── */

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  /* ── OMBRE ───────────────────────────────────────────────── */

  --shadow-xs: 0 1px 2px rgba(45, 41, 38, 0.05);
  --shadow-sm: 0 2px 6px rgba(45, 41, 38, 0.07), 0 1px 2px rgba(45, 41, 38, 0.05);
  --shadow-md: 0 4px 16px rgba(45, 41, 38, 0.09), 0 2px 4px rgba(45, 41, 38, 0.05);
  --shadow-lg: 0 12px 40px rgba(45, 41, 38, 0.12), 0 4px 8px rgba(45, 41, 38, 0.06);
  --shadow-xl: 0 24px 64px rgba(45, 41, 38, 0.15), 0 8px 16px rgba(45, 41, 38, 0.08);

  /* ── TRANSIZIONI ─────────────────────────────────────────── */

  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0.0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --t-fast: 140ms;
  --t-base: 280ms;
  --t-slow: 520ms;
  --t-slower: 800ms;

  /* ── Z-INDEX SCALE ───────────────────────────────────────── */

  --z-below: -1;
  --z-base: 0;
  --z-above: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-nav: 500;
  --z-modal: 900;
  --z-toast: 1000;
}