/* ===========================================================
   variables.css — design tokens
   =========================================================== */

:root {
  /* ---- Colors ---- */
  --color-primary:  #C8A96E;  /* warm gold — Sardinian sunlight */
  --color-bg:       #FAF7F2;  /* warm white */
  --color-text:     #1A1A1A;  /* near black */
  --color-accent:   #B0573B;  /* terracotta — cotto / tramonto */
  --color-surface:  #FFFFFF;
  --color-muted:    #7A7168;  /* warm grey for secondary text */
  --color-border:   #E8E2D9;

  --color-primary-dark: #B0915A;
  --color-accent-dark:  #8A4530;  /* terracotta scuro */
  --color-deep:         #2E2620;  /* espresso — travi (sezioni scure/footer) */
  --color-overlay:      rgba(26, 26, 26, 0.45);

  /* ---- Typography ---- */
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --fs-base: 1rem;        /* 16px */
  --fs-sm:   0.8rem;
  --fs-md:   1.25rem;
  --fs-lg:   1.563rem;
  --fs-xl:   1.953rem;
  --fs-2xl:  2.441rem;
  --fs-3xl:  3.052rem;
  --fs-4xl:  3.815rem;

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-base:  1.6;

  /* ---- Spacing scale (0.5rem steps) ---- */
  --space-1:  0.5rem;
  --space-2:  1rem;
  --space-3:  1.5rem;
  --space-4:  2rem;
  --space-5:  2.5rem;
  --space-6:  3rem;
  --space-8:  4rem;
  --space-10: 5rem;
  --space-12: 6rem;

  --content-max: 1200px;
  --section-pad-y: 6rem;
  --section-pad-x: 2rem;

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-full: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 3px rgba(26, 26, 26, 0.06);
  --shadow-md: 0 8px 24px rgba(26, 26, 26, 0.08);
  --shadow-lg: 0 18px 48px rgba(26, 26, 26, 0.14);

  /* ---- Transitions ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.18s var(--ease);
  --t-base: 0.32s var(--ease);
  --t-slow: 0.6s var(--ease-out);

  /* ---- Layout ---- */
  --navbar-h: 72px;
  --z-navbar: 100;
  --z-lightbox: 200;
}