/* ========================================
   AN NHIÊN HOMESTAY — Design Tokens
   Palette extracted from logo & room photos:
   warm cream, dark brown, leaf green, wood tones
   ======================================== */

:root {
  /* ── Colors ── */
  --color-cream-light:   #FAF7F2;
  --color-cream:         #F0EBE3;
  --color-cream-dark:    #E5DED4;
  --color-brown-dark:    #3C3228;
  --color-brown:         #5A4D3F;
  --color-brown-medium:  #7A6E62;
  --color-brown-light:   #A89B8C;
  --color-brown-wood:    #8B7355;
  --color-green:         #5C7A5C;
  --color-green-light:   #7A9E7A;
  --color-green-dark:    #3D5A3D;
  --color-white:         #FFFFFF;
  --color-black:         #1A1714;
  --color-overlay:       rgba(28, 23, 18, 0.55);
  --color-overlay-light: rgba(28, 23, 18, 0.25);
  --color-glass:         rgba(250, 247, 242, 0.75);
  --color-glass-border:  rgba(90, 77, 63, 0.12);

  /* ── Typography ── */
  --font-heading: 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-accent:  'Cormorant Garamond', 'Georgia', serif;

  --fs-display:  clamp(3rem, 6vw, 5.5rem);
  --fs-h1:       clamp(2.2rem, 4vw, 3.5rem);
  --fs-h2:       clamp(1.8rem, 3vw, 2.8rem);
  --fs-h3:       clamp(1.3rem, 2vw, 1.8rem);
  --fs-h4:       clamp(1.1rem, 1.5vw, 1.3rem);
  --fs-body:     clamp(0.95rem, 1.1vw, 1.1rem);
  --fs-body-lg:  clamp(1.05rem, 1.3vw, 1.25rem);
  --fs-small:    clamp(0.8rem, 0.9vw, 0.9rem);
  --fs-caption:  0.75rem;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:    1.15;
  --lh-heading:  1.25;
  --lh-body:     1.7;
  --lh-relaxed:  1.9;

  --ls-wide:     0.15em;
  --ls-wider:    0.25em;
  --ls-widest:   0.35em;

  /* ── Spacing ── */
  --space-xs:    0.5rem;
  --space-sm:    1rem;
  --space-md:    1.5rem;
  --space-lg:    2rem;
  --space-xl:    3rem;
  --space-2xl:   4rem;
  --space-3xl:   5.5rem;
  --space-4xl:   8rem;

  --container-max:   1280px;
  --container-narrow: 900px;
  --container-wide:  1440px;

  /* ── Borders & Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:    0 1px 3px rgba(60, 50, 40, 0.06);
  --shadow-md:    0 4px 16px rgba(60, 50, 40, 0.08);
  --shadow-lg:    0 8px 32px rgba(60, 50, 40, 0.10);
  --shadow-xl:    0 16px 48px rgba(60, 50, 40, 0.12);
  --shadow-glow:  0 0 40px rgba(92, 122, 92, 0.15);

  /* ── Transitions ── */
  --ease-smooth:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --duration-fast:   200ms;
  --duration-normal: 400ms;
  --duration-slow:   600ms;
  --duration-slower: 900ms;

  /* ── Z-Index Scale ── */
  --z-base:      1;
  --z-dropdown:  10;
  --z-sticky:    100;
  --z-overlay:   500;
  --z-modal:     1000;
  --z-toast:     1500;
}