/* ============================================================ ZAREYA — Design Tokens Light mode is default. Dark mode applied via html.dark class. ============================================================ */ :root { /* ── PRIMARY BRAND ────────────────────────────────────── */ --rose: #ff03ed; /* Vivid Pink — primary */ --rose-hover: #d600ca; /* Darker on hover */ --rose-light: #ff40f0; /* Lighter variant */ --rose-10: rgba(255, 3, 237, 0.08); --rose-18: rgba(255, 3, 237, 0.15); --rose-25: rgba(255, 3, 237, 0.22); /* ── SECONDARY BRAND ──────────────────────────────────── */ --dark: #32002f; /* Dark Neon Pink — secondary */ --dark-2: #4a0046; --dark-3: #200020; /* ── BACKGROUND — LIGHT MODE ─────────────────────────── */ --bg: #ffffff; --bg-2: #fdf5fd; --bg-3: #f8ebf8; --bg-4: #f0d8f0; /* ── TEXT — LIGHT MODE ───────────────────────────────── */ --text: #1a001a; --text-2: #5a3a58; --text-3: #8a6a88; --text-4: #c0a0be; /* ── BORDERS — LIGHT MODE ────────────────────────────── */ --border: rgba(50, 0, 47, 0.10); --border-2: rgba(50, 0, 47, 0.18); --border-3: rgba(50, 0, 47, 0.28); /* ── TYPOGRAPHY ───────────────────────────────────────── */ --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Outfit', system-ui, sans-serif; /* Type scale */ --size-xl: clamp(54px, 7.5vw, 92px); --size-lg: clamp(38px, 5vw, 62px); --size-md: clamp(28px, 3.5vw, 42px); --size-sm: clamp(22px, 2.5vw, 30px); --size-body-l: 17px; --size-body: 15px; --size-body-s: 13px; --size-label: 11px; /* ── SPACING ──────────────────────────────────────────── */ --section: 96px; --section-sm: 60px; --container: 1280px; --gutter: 52px; --gutter-sm: 24px; --nav-height: 72px; --gap: 32px; --gap-sm: 16px; --radius: 2px; /* ── ANIMATION ────────────────────────────────────────── */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration: 0.28s; --duration-sm: 0.15s; --duration-lg: 0.45s; /* ── SHADOWS ──────────────────────────────────────────── */ --shadow: 0 8px 32px rgba(50, 0, 47, 0.12); --shadow-sm: 0 2px 12px rgba(50, 0, 47, 0.08); /* ── Z-INDEX ──────────────────────────────────────────── */ --z-base: 1; --z-nav: 100; --z-modal: 200; --z-toast: 300; } /* ── DARK MODE ───────────────────────────────────────────── */ /* Applied when — toggled by theme.js */ html.dark { /* Backgrounds — deep purple-black derived from #32002f */ --bg: #0d000c; --bg-2: #1a0019; --bg-3: #220021; --bg-4: #2c002a; /* Text */ --text: #f5e6f5; --text-2: #c8a0c6; --text-3: #8a5a88; --text-4: #5a3a58; /* Borders — pink-tinted in dark mode */ --border: rgba(255, 3, 237, 0.08); --border-2: rgba(255, 3, 237, 0.15); --border-3: rgba(255, 3, 237, 0.24); /* Shadows */ --shadow: 0 8px 32px rgba(0, 0, 0, 0.5); --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.4); } /* ── MOBILE OVERRIDES ─────────────────────────────────────── */ @media (max-width: 768px) { :root { --section: 64px; --gutter: var(--gutter-sm); --gap: 20px; } }