/* css/variables.css */ /* Reset */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Body: clean solid surface (no dot-grid). Depth comes from sections, hairline borders and the product mockups — enterprise, not decorative. */ body { background-color: var(--vd-bg); color: var(--vd-text); min-height: 100vh; overflow-x: hidden; } a { color: inherit; text-decoration: none; } /* Hide Lexend parent theme footer copyright */ .site-footer, .footer-copyright, #footer .copyright, .lexend-footer, .footer-bottom:not(.vd-footer-bottom) { display: none !important; } button { cursor: pointer; border: none; background: none; font: inherit; } img, svg { display: block; max-width: 100%; } ul, ol { list-style: none; } /* Dark tokens (base). Light is applied as the default via the `light` class on (see header.php / main.js); dark mode = remove that class. */ :root { --vd-primary: #FF6B00; --vd-primary-hover: #FF7E1F; --vd-primary-subtle: rgba(255,107,0,0.10); --vd-primary-border: rgba(255,107,0,0.20); --vd-bg: #1a1a1d; --vd-surface: #202024; --vd-card: #202024; --vd-stroke: rgba(255,255,255,0.08); --vd-text: #ededef; --vd-text-muted: #9a9aa6; --vd-text-faint: #5a5a64; /* Shadows */ --vd-shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --vd-shadow-md: 0 4px 12px rgba(0,0,0,0.35); --vd-shadow-lg: 0 8px 32px rgba(0,0,0,0.4); --vd-shadow-xl: 0 16px 48px rgba(0,0,0,0.45); /* Radius */ --vd-radius-tag: 4px; --vd-radius-btn: 8px; --vd-radius-input: 10px; --vd-radius-card: 12px; --vd-radius-pill: 100px; /* Spacing */ --vd-space-micro: 4px; --vd-space-inner: 8px; --vd-space-tight: 12px; --vd-space-comp: 16px; --vd-space-card-inner: 24px; --vd-space-card: 32px; --vd-space-container: 48px; --vd-space-section: 80px; /* Layout */ --vd-container: 1280px; --vd-container-secondary: 1140px; --vd-container-narrow: 960px; } /* Light mode (DEFAULT) — matches vdclip-docs: pure white base, near-black neutral text, hairline borders, orange as a sparing accent. */ html.light { --vd-primary: #E05F00; /* darker orange reads better as accent on white */ --vd-primary-hover: #CC5500; --vd-primary-subtle: rgba(224,95,0,0.06); --vd-primary-border: rgba(224,95,0,0.16); --vd-bg: #ffffff; /* oklch(1 0 0) — docs background */ --vd-surface: #ffffff; --vd-card: #ffffff; --vd-stroke: #e7e7ea; --vd-text: #18181b; /* near-black, neutral */ --vd-text-muted: #5b5b66; /* AA on white */ --vd-text-faint: #a1a1aa; --vd-shadow-sm: 0 1px 2px rgba(24,24,27,0.05); --vd-shadow-md: 0 1px 3px rgba(24,24,27,0.07), 0 1px 2px rgba(24,24,27,0.04); --vd-shadow-lg: 0 4px 16px rgba(24,24,27,0.08); --vd-shadow-xl: 0 12px 32px rgba(24,24,27,0.10); } /* Desktop spacing */ @media (min-width: 1024px) { :root { --vd-space-section: 120px; } }