/* ==========================================================================
   ART DOLCE VITA — Design tokens
   Palette: warm ivory + ink black + antique gold (single accent)
   Type: Playfair Display (display) + Inter (ui/body)
   ========================================================================== */

:root{
  /* ---- Color: light (default) ---- */
  --color-bg:            #FAF6EF;
  --color-bg-alt:        #F3ECE0;
  --color-surface:       #FFFFFF;
  --color-ink:           #1A1611;
  --color-ink-soft:      #4A4238;
  --color-ink-mute:      #8A7F70;
  --color-border:        #E4DACB;
  --color-border-strong: #1A1611;

  --color-gold:          #A5763B;
  --color-gold-soft:     #C9A874;
  --color-gold-tint:     #F1E6D2;
  --color-on-gold:       #1A1611;

  --color-ink-bg:        #14110D;   /* dark sections */
  --color-ink-bg-alt:    #1E1A14;
  --color-on-ink:        #F5EFE4;
  --color-on-ink-mute:   #B8AD9C;

  --color-success:       #4B6350;
  --color-error:         #A23B2E;

  /* semantic aliases */
  --bg:            var(--color-bg);
  --surface:       var(--color-surface);
  --fg:            var(--color-ink);
  --fg-muted:      var(--color-ink-mute);
  --accent:        var(--color-gold);
  --border:        var(--color-border);

  /* ---- Type ---- */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-2xs:  0.6875rem;  /* 11px — eyebrow labels */
  --fs-xs:   0.8125rem;  /* 13px */
  --fs-sm:   0.9375rem;  /* 15px */
  --fs-base: 1rem;       /* 16px */
  --fs-md:   1.125rem;   /* 18px */
  --fs-lg:   1.375rem;   /* 22px */
  --fs-xl:   1.75rem;    /* 28px */
  --fs-2xl:  2.25rem;    /* 36px */
  --fs-3xl:  3rem;       /* 48px */
  --fs-4xl:  clamp(2.75rem, 6vw + 1rem, 5.25rem);

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.65;

  --ls-eyebrow: 0.16em;
  --ls-tight: -0.01em;

  /* ---- Spacing (8pt rhythm, mobile-first) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --container-max: 1280px;
  --container-pad: 1.25rem;

  /* ---- Radius / elevation ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(26,22,17,0.06);
  --shadow-md: 0 8px 24px rgba(26,22,17,0.08);
  --shadow-lg: 0 20px 48px rgba(26,22,17,0.14);
  --shadow-gold: 0 12px 32px rgba(165,118,59,0.22);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 300ms;
  --dur-slow: 450ms;
  --dur-reveal: 700ms;

  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}

@media (prefers-color-scheme: dark){
  :root[data-theme="auto"]{
    --bg: var(--color-ink-bg);
    --surface: var(--color-ink-bg-alt);
    --fg: var(--color-on-ink);
    --fg-muted: var(--color-on-ink-mute);
    --border: #332C22;
  }
}

@media (min-width: 768px){
  :root{ --container-pad: 2rem; }
}
@media (min-width: 1024px){
  :root{ --container-pad: 3rem; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}