/* ============================================================
   MOOD HOUSE — CSS Custom Properties
   ============================================================ */

:root {
  /* Colors */
  --color-bg:          #FAF7F2;
  --color-bg-alt:      #F0EBE3;
  --color-bg-dark:     #1A1A18;
  --color-dark-soft:   #2E2E2A;
  --color-gold:        #C9A96E;
  --color-gold-light:  #E8D5B0;
  --color-gold-dark:   #A07840;
  --color-rose:        #C8A09A;
  --color-sage:        #8B9E8A;
  --color-text:        #3D3D3A;
  --color-text-muted:  #8A7F76;
  --color-white:       #FFFFFF;
  --color-border:      rgba(201,169,110,0.2);
  --color-border-dark: rgba(201,169,110,0.12);
  --color-glass:       rgba(250,247,242,0.12);
  --color-overlay:     rgba(26,26,24,0.55);

  /* Typography */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', system-ui, sans-serif;

  /* Font Sizes — fluid scale */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.5rem;
  --fs-4xl:  3.5rem;
  --fs-5xl:  5rem;
  --fs-6xl:  7rem;

  /* Spacing */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;
  --space-3xl:  96px;
  --space-4xl:  128px;

  /* Border Radius */
  --radius-sm:  2px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:    0 2px 8px rgba(26,26,24,0.06);
  --shadow-md:    0 4px 20px rgba(26,26,24,0.08), 0 1px 4px rgba(26,26,24,0.04);
  --shadow-lg:    0 12px 40px rgba(26,26,24,0.12), 0 4px 12px rgba(26,26,24,0.06);
  --shadow-xl:    0 20px 60px rgba(26,26,24,0.15), 0 4px 16px rgba(201,169,110,0.12);
  --shadow-gold:  0 8px 30px rgba(201,169,110,0.35);
  --shadow-hover: 0 24px 64px rgba(26,26,24,0.18), 0 6px 20px rgba(201,169,110,0.14);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-spring: 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Z-index Scale */
  --z-base:    1;
  --z-card:    10;
  --z-topbar:  30;
  --z-nav:     40;
  --z-sticky:  50;
  --z-overlay: 60;
  --z-modal:   70;

  /* Layout */
  --container-max: 1280px;
  --container-sm:  900px;
  --topbar-h:      40px;
  --nav-h:         72px;
  --section-py:    100px;
  --section-py-sm: 60px;
}

@media (max-width: 768px) {
  :root {
    --fs-4xl:    2.5rem;
    --fs-5xl:    3.5rem;
    --fs-6xl:    4.5rem;
    --section-py: 64px;
    --nav-h:     64px;
  }
}