/* =============================================
   leo-variables.css — Leo by Alber
   Brand palette: emerald · beige · khaki
   ============================================= */
:root {
  /* ── Brand Colors ── */
  --emerald:        #2D6A4F;
  --emerald-light:  #40916C;
  --emerald-soft:   #74C69D;
  --emerald-pale:   #D8F3DC;
  --beige:          #F5EFE0;
  --beige-warm:     #EDE0C4;
  --beige-dark:     #C9B99A;
  --khaki:          #8B9D6A;
  --khaki-dark:     #6B7A4A;
  --khaki-light:    #B5C99A;
  --off-white:      #FAF8F3;
  --beige-delicate: #F7F4EE;
  --beige-delicate-alt: #F4EFE6;
  --khaki-deep:     #2A3622;
  --khaki-banner-grad: linear-gradient(145deg, #222C1B 0%, #344329 50%, #26321F 100%);
  --khaki-gold:     #D4AF37;
  --khaki-light-border: rgba(181, 201, 154, 0.28);
  --warm-black:     #1A1814;
  --warm-gray:      #6B6560;
  --warm-gray-light:#B8B2A8;
  --warm-gray-pale: #EDE8E0;

  /* ── Accent ── */
  --sale-red:       #C0392B;
  --sale-red-light: #E74C3C;
  --gold:           #C9A94A;

  /* ── Typography — Song Myung ── */
  --font-display:  'Song Myung', 'Noto Serif', Georgia, serif;
  --font-body:     'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* ── Sizes ── */
  --text-xs:    0.6875rem;
  --text-sm:    0.8125rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.375rem;
  --text-xl:    1.75rem;
  --text-2xl:   2.25rem;
  --text-3xl:   3rem;
  --text-hero:  clamp(3rem, 9vw, 8rem);

  /* ── Weights ── */
  --fw-light:  300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* ── Spacing ── */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem;
  --sp-4: 1rem;    --sp-5: 1.25rem;--sp-6: 1.5rem;
  --sp-8: 2rem;    --sp-10:2.5rem; --sp-12:3rem;
  --sp-16:4rem;    --sp-20:5rem;   --sp-24:6rem;

  --container-max: 1440px;
  --container-pad: clamp(1rem, 4vw, 3rem);
  --section-pad:   clamp(3rem, 7vw, 6rem);
  --header-h:      68px;

  /* ── Radius ── */
  --r-sm: 2px; --r-md: 6px; --r-lg: 12px; --r-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 4px rgba(26,24,20,.08);
  --shadow-md:  0 4px 20px rgba(26,24,20,.10);
  --shadow-lg:  0 12px 40px rgba(26,24,20,.14);

  /* ── Easing ── */
  --ease-out:   cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-cin:   cubic-bezier(0.4, 0.0, 0.6, 1);

  /* ── Z-layers ── */
  --z-header:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
}