/* style.css — KVDOS Design Tokens & Site Styles */ /* ============================================ FONTS: Outfit (display) + DM Sans (body) Loaded via Google Fonts in HTML ============================================ */ /* ============================================ TYPE SCALE (Fluid) ============================================ */ :root { --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); --text-lg: clamp(1.125rem, 0.95rem + 0.85vw, 1.5rem); --text-xl: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem); --text-hero: clamp(3rem, 0.5rem + 7vw, 8rem); } /* ============================================ 4px SPACING SYSTEM ============================================ */ :root { --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ } /* ============================================ CUSTOM DARK PALETTE — KVDOS Dark mode ONLY. No light mode. Deep charcoal/slate with muted gold accent. ============================================ */ :root { /* --- Font families --- */ --font-display: 'Outfit', 'Helvetica Neue', sans-serif; --font-body: 'DM Sans', 'Helvetica Neue', sans-serif; /* --- Surfaces (Deep Charcoal) --- */ --color-bg: #0d0d0d; --color-surface: #131313; --color-surface-2: #1a1a1a; --color-surface-offset: #151515; --color-surface-offset-2:#1e1e1e; --color-surface-dynamic: #252525; --color-divider: #2a2a2a; --color-border: #333333; /* --- Text (Warm Off-White) --- */ --color-text: #e8e6e1; --color-text-muted: #8a877f; --color-text-faint: #5a5850; --color-text-inverse: #0d0d0d; /* --- Accent (Muted Gold) — used VERY sparingly --- */ --color-accent: #9a8c6e; --color-accent-hover: #b0a080; --color-accent-active: #7d7158; --color-accent-highlight:#2a2720; /* --- Radius --- */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; /* --- Transitions --- */ --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1); /* --- Shadows (minimal — mostly unused on this dark site) --- */ --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3); --shadow-md: 0 4px 12px oklch(0 0 0 / 0.4); --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.5); /* --- Content widths --- */ --content-narrow: 550px; --content-default: 960px; --content-wide: 1200px; --content-full: 100%; }