/* ============================================
 * La Eva Vietnam — Design Tokens
   ============================================ */

:root {
  /* ---- Color Palette ---- */
  --color-bg:              #fefbf4;
  --color-bg-alt:          #f7f3ec;
  --color-bg-warm:         #ede0cc;
  --color-bg-dark:         #1f1c17;
  --color-bg-cream:        #f9f5ee;

  --color-text-primary:    #1f1c17;
  --color-text-body:       #414548;
  --color-text-muted:      #8a8a8a;
  --color-text-light:      #fefbf4;
  --color-text-white:      #ffffff;

  --color-gold:            #c5a25d;
  --color-gold-hover:      #b08d47;
  --color-gold-light:      #d4b97a;

  --color-accent-pink:     #d4738a;
  --color-accent-rose:     #c96b83;
  --color-accent-green:    #7bad34;
  --color-accent-red:      #be2f31;

  --color-border:          #ccb48f;
  --color-border-light:    #e8ddd0;
  --color-border-subtle:   #f0ebe4;

  --color-overlay:         rgba(31, 28, 23, 0.55);
  --color-overlay-light:   rgba(31, 28, 23, 0.08);

  /* ---- Typography ---- */
  --font-body:             'UTM Avo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading:          'UTM Avo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-accent:           'UTM Avo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs:                 0.75rem;    /* 12px */
  --fs-sm:                 0.8125rem;  /* 13px */
  --fs-base:               1rem;       /* 16px */
  --fs-md:                 1.125rem;   /* 18px */
  --fs-lg:                 1.25rem;    /* 20px */
  --fs-xl:                 1.5rem;     /* 24px */
  --fs-2xl:                2rem;       /* 32px */
  --fs-3xl:                2.5rem;     /* 40px */
  --fs-4xl:                3.5rem;     /* 56px */
  --fs-hero:               4.5rem;     /* 72px */

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

  --lh-tight:              1.2;
  --lh-normal:             1.5;
  --lh-relaxed:            1.7;
  --lh-loose:              1.9;

  --ls-tight:              -0.02em;
  --ls-normal:             0;
  --ls-wide:               0.05em;
  --ls-wider:              0.1em;
  --ls-widest:             0.15em;

  /* ---- Spacing Scale ---- */
  --space-xs:              0.25rem;    /* 4px */
  --space-sm:              0.5rem;     /* 8px */
  --space-md:              1rem;       /* 16px */
  --space-lg:              1.5rem;     /* 24px */
  --space-xl:              2rem;       /* 32px */
  --space-2xl:             3rem;       /* 48px */
  --space-3xl:             4rem;       /* 64px */
  --space-4xl:             6rem;       /* 96px */
  --space-5xl:             8rem;       /* 128px */
  --space-section:         7rem;       /* 112px */

  /* ---- Layout ---- */
  --max-width:             1440px;
  --content-width:         1200px;
  --header-height:         80px;
  --announcement-height:   40px;

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

  /* ---- Shadows ---- */
  --shadow-sm:             0 1px 3px rgba(31, 28, 23, 0.06);
  --shadow-md:             0 4px 12px rgba(31, 28, 23, 0.08);
  --shadow-lg:             0 8px 30px rgba(31, 28, 23, 0.1);
  --shadow-xl:             0 16px 50px rgba(31, 28, 23, 0.12);

  /* ---- Transitions ---- */
  --transition-fast:       150ms ease;
  --transition-normal:     300ms ease;
  --transition-slow:       500ms ease;
  --transition-drawer:     400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Z-Index Scale ---- */
  --z-base:                1;
  --z-dropdown:            100;
  --z-sticky:              200;
  --z-drawer:              300;
  --z-overlay:             400;
  --z-modal:               500;
  --z-toast:               600;
  --z-announcement:        700;
}