:root{

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

--color-background:#F6F5F3;
--color-surface:#FFFFFF;
--color-primary:#111315;
--color-secondary:#5F6368;

--color-accent:#0B6B73;
--color-accent-hover:#084F55;

--color-premium:#C4A86A;

--color-border:#DDDDD8;

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

--font-heading:'IBM Plex Sans',sans-serif;
--font-body:'Manrope',sans-serif;
--font-code:'IBM Plex Mono',monospace;

/* ===== FONT SIZE ===== */

--fs-hero:clamp(3.8rem,7vw,7rem);
--fs-h1:3rem;
--fs-h2:2.3rem;
--fs-h3:1.6rem;

--fs-body:1.1rem;
--fs-small:.95rem;

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

--space-xs:8px;
--space-sm:16px;
--space-md:32px;
--space-lg:64px;
--space-xl:96px;
--space-2xl:160px;

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

--radius-sm:8px;
--radius-md:14px;
--radius-lg:24px;

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

--shadow-sm:
0 3px 8px rgba(0,0,0,.05);

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

--shadow-xl:
0 30px 80px rgba(0,0,0,.10);

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

--transition-fast:.2s ease;

--transition-normal:.35s cubic-bezier(.22,.61,.36,1);

}