/* ==========================================================================
   Una Gemma per le Zampe — design tokens
   Direzione: editoriale pop, personale, energica.
   Scala spazi 8pt. Non hardcodare colori/spazi nei componenti.
   ========================================================================== */

:root {
  /* --- Colore --- */
  --color-cream-50: #fffdfd;
  --color-cream-100: #fffafa;
  --color-cream-200: #fff2f5;
  --color-cream-300: #f4e7eb;

  --color-ink-900: #171827;
  --color-ink-800: #1d1e2e;
  --color-ink-700: #38394a;
  --color-ink-600: #656575;
  --color-ink-400: #9999a5;
  --color-ink-200: #e5dfe3;

  --color-gem-800: #a91865;
  --color-gem-700: #c82a7c;
  --color-gem-500: #ee58a7;
  --color-gem-400: #f276b8;
  --color-gem-100: #ffd8ec;
  --color-gem-50: #fff0f7;

  --color-coral-600: #e53f35;
  --color-coral-500: #ff574d;
  --color-coral-400: #ff746c;
  --color-coral-100: #ffe1de;
  --color-coral-50: #fff3f2;

  --color-gold-600: #b38100;
  --color-gold-500: #ffc328;
  --color-gold-300: #ffda75;
  --color-gold-100: #fff3c8;

  --color-peach: #ffe6e5;
  --color-sky: #dff4ff;
  --color-lavender: #eee8f5;
  --color-mint: #e4f1ec;
  --color-blush: #f8e8ec;
  --color-lemon: #f6f1d8;

  --color-white: #ffffff;
  --color-text: var(--color-ink-800);
  --color-text-muted: var(--color-ink-600);
  --color-bg: var(--color-cream-100);
  --color-surface: var(--color-white);
  --color-border: var(--color-ink-200);
  --color-focus: var(--color-gem-500);

  /* --- Tipo --- */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: var(--font-serif);

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  --text-3xl: clamp(2.15rem, 1.3rem + 3vw, 3.5rem);
  --text-4xl: clamp(3rem, 1.5rem + 4.8vw, 5.65rem);

  --leading-tight: 1.15;
  --leading-snug: 1.28;
  --leading-body: 1.65;
  --tracking-display: -0.025em;

  /* --- Spazi (8pt) --- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;
  --space-section: clamp(72px, 8vw, 120px);
  --space-gutter: 20px;
  --space-copy-intro: 8px;
  --space-copy-title: 16px;
  --space-copy-desc: 24px;
  --space-copy-cta: 8px;

  /* --- Raggi --- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 44px;
  --radius-pill: 999px;

  /* --- Layout --- */
  --container: 1240px;
  --container-narrow: 760px;
  --header-h: 88px;
  --touch: 48px;

  /* --- Ombra --- */
  --shadow-sm: 0 4px 14px rgba(29, 30, 46, 0.06);
  --shadow-md: 0 14px 34px rgba(29, 30, 46, 0.11);
  --shadow-lg: 0 28px 64px rgba(29, 30, 46, 0.16);
  --shadow-coral: 0 12px 26px rgba(255, 87, 77, 0.3);

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-2: 180ms;
  --dur-3: 280ms;
}

@media (max-width: 720px) {
  :root {
    --space-gutter: 16px;
    --header-h: 72px;
  }
}