/*==================================================
  VARIABLES.CSS
  Zen Spa Home Design System
==================================================*/

:root{

/*==================================================
  COLORS
==================================================*/

--color-primary:#B9915D;
--color-primary-light:#D2B48C;
--color-primary-dark:#8A6942;

--color-secondary:#181818;

--color-background:#0F0F10;
--color-surface:#171717;
--color-surface-light:#212121;

--color-white:#FFFFFF;
--color-black:#000000;

--color-text:#F5F5F5;
--color-text-light:rgba(255,255,255,.75);
--color-text-muted:rgba(255,255,255,.55);

--color-border:rgba(255,255,255,.08);

--color-overlay:rgba(0,0,0,.45);

--gradient-primary:
linear-gradient(
135deg,
#B9915D 0%,
#D6B98C 100%
);

--gradient-dark:
linear-gradient(
180deg,
rgba(0,0,0,.15),
rgba(0,0,0,.70)
);

/*==================================================
  TYPOGRAPHY
==================================================*/

--font-heading:"Cormorant Garamond",serif;
--font-body:"Inter",sans-serif;

--font-size-xs:.75rem;
--font-size-sm:.875rem;
--font-size-base:1rem;
--font-size-md:1.125rem;
--font-size-lg:1.25rem;
--font-size-xl:1.5rem;
--font-size-2xl:2rem;
--font-size-3xl:3rem;
--font-size-4xl:4rem;
--font-size-5xl:5rem;
--font-size-6xl:6rem;

--line-height:1.7;

/*==================================================
  SPACING
==================================================*/

--space-2xs:.25rem;
--space-xs:.5rem;
--space-sm:.75rem;
--space-md:1rem;
--space-lg:1.5rem;
--space-xl:2rem;
--space-2xl:3rem;
--space-3xl:4rem;
--space-4xl:6rem;
--space-5xl:8rem;

/*==================================================
  CONTAINER
==================================================*/

--container-width:1320px;
--container-padding:24px;

/*==================================================
  BORDER RADIUS
==================================================*/

--radius-xs:4px;
--radius-sm:8px;
--radius-md:12px;
--radius-lg:20px;
--radius-xl:32px;
--radius-pill:999px;

/*==================================================
  SHADOWS
==================================================*/

--shadow-sm:
0 4px 10px rgba(0,0,0,.08);

--shadow-md:
0 10px 30px rgba(0,0,0,.15);

--shadow-lg:
0 25px 60px rgba(0,0,0,.25);

--shadow-xl:
0 40px 90px rgba(0,0,0,.35);

/*==================================================
  TRANSITIONS
==================================================*/

--transition-fast:.25s ease;
--transition-normal:.45s cubic-bezier(.22,.61,.36,1);
--transition-slow:.8s cubic-bezier(.22,.61,.36,1);

/*==================================================
  Z INDEX
==================================================*/

--z-loader:9999;
--z-navbar:900;
--z-overlay:800;
--z-dropdown:700;
--z-modal:1000;
--z-tooltip:1100;

/*==================================================
  HEADER
==================================================*/

--header-height:92px;

/*==================================================
  BLUR
==================================================*/

--blur-sm:8px;
--blur-md:18px;
--blur-lg:40px;

}