/* ============================================================
   MOMENTI INTERIOR — VARIANTE "MARMO E GRAFITE"
   variables.css — Design Tokens
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

:root {

  /* ── COLORI BASE ── */
  --color-bg:           #1a1916;   /* sfondo principale dark */
  --color-surface:      #222120;   /* superfici card/nav */
  --color-surface-2:    #2c2a27;   /* superfici elevate */
  --color-panel:        #323029;   /* pannelli secondari */
  --color-border:       rgba(255, 255, 255, 0.07);
  --color-border-hover: rgba(201, 169, 110, 0.35);

  /* ── TESTI ── */
  --color-text-primary:   #f2efe8;   /* testo principale bianco caldo */
  --color-text-secondary: #b8b4aa;   /* testo secondario grigio chiaro */
  --color-text-muted:     #6b6860;   /* testo disabilitato/label */
  --color-text-inverse:   #1a1916;   /* testo su sfondi chiari */

  /* ── ACCENTI ── */
  --color-gold:           #c9a96e;   /* oro principale */
  --color-gold-light:     #ddc490;   /* oro chiaro / hover */
  --color-gold-dark:      #a8893a;   /* oro scuro / pressed */
  --color-sage:           #8a9980;   /* salvia / accento secondario */
  --color-sage-light:     #a8b8a0;   /* salvia chiaro */

  /* ── STATI ── */
  --color-success:  #6a9a70;
  --color-error:    #9a6a6a;
  --color-overlay:  rgba(26, 25, 22, 0.72);

  /* ── TIPOGRAFIA ── */
  --font-display:  'Libre Baskerville', Georgia, serif;
  --font-body:     'DM Sans', system-ui, sans-serif;

  --font-size-xs:   0.6875rem;   /*  11px */
  --font-size-sm:   0.8125rem;   /*  13px */
  --font-size-base: 0.9375rem;   /*  15px */
  --font-size-md:   1.0625rem;   /*  17px */
  --font-size-lg:   1.25rem;     /*  20px */
  --font-size-xl:   1.5rem;      /*  24px */
  --font-size-2xl:  2rem;        /*  32px */
  --font-size-3xl:  2.75rem;     /*  44px */
  --font-size-4xl:  3.5rem;      /*  56px */
  --font-size-5xl:  clamp(3rem, 6vw, 5.5rem);

  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;

  --line-height-tight:  1.05;
  --line-height-snug:   1.25;
  --line-height-normal: 1.6;
  --line-height-loose:  1.85;

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal:  0em;
  --letter-spacing-wide:    0.08em;
  --letter-spacing-wider:   0.15em;
  --letter-spacing-widest:  0.28em;

  /* ── SPACING ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── LAYOUT ── */
  --container-max:  1440px;
  --container-pad:  clamp(24px, 5vw, 80px);

  /* ── BORDI & RAGGI ── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-none: 0px;

  /* ── OMBRE ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.6);
  --shadow-gold: 0 0 32px rgba(201,169,110,0.12);

  /* ── TRANSIZIONI ── */
  --transition-fast:   0.18s ease;
  --transition-base:   0.28s ease;
  --transition-slow:   0.45s ease;
  --transition-smooth: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Z-INDEX ── */
  --z-below:   -1;
  --z-base:     0;
  --z-overlay: 10;
  --z-nav:     50;
  --z-modal:  100;
}