/* ========================================================= VK GROWTH STUDIO — DESIGN TOKENS ========================================================= */ :root { /* Brand colors (fixed — do not swap with theme) */ --color-white: #FFFFFF; --color-soft-gray: #F4F3F1; --color-soft-gray-2: #EAE8E4; --color-black: #0B0B0C; --color-ink: #17181A; --color-gray-text: #58564F; --color-gray-line: #E4E1DC; --color-gold: #C9A176; --color-gold-dark: #A9825C; /* Semantic tokens — these are the ones that swap in dark mode */ --surface-page: var(--color-white); --surface-alt: var(--color-soft-gray); --surface-card: var(--color-white); --text-primary: var(--color-black); --text-secondary: var(--color-gray-text); --border-color: var(--color-gray-line); --nav-bg: rgba(255, 255, 255, 0.78); --btn-primary-bg: var(--color-black); --btn-primary-text: var(--color-white); /* Typography */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Layout */ --container: 1200px; --gutter: clamp(1.25rem, 4vw, 3rem); --section-pad: clamp(3.5rem, 9vw, 7rem); --section-pad-sm: clamp(2.5rem, 6vw, 4rem); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 18px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(11, 11, 12, 0.06); --shadow-md: 0 10px 28px rgba(11, 11, 12, 0.08); --shadow-lg: 0 24px 56px rgba(11, 11, 12, 0.16); /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 200ms; --dur-med: 500ms; --dur-slow: 900ms; } /* Dark theme — toggled via [data-theme="dark"] on */ [data-theme="dark"] { --surface-page: var(--color-black); --surface-alt: #1C1C1E; --surface-card: #17181A; --text-primary: #F5F4F2; --text-secondary: rgba(245, 244, 242, 0.68); --border-color: rgba(255, 255, 255, 0.12); --nav-bg: rgba(11, 11, 12, 0.8); --btn-primary-bg: var(--color-gold); --btn-primary-text: var(--color-black); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.55); }