/* ============================================================ VALTON BUILDING SERVICES : Design Tokens A division of Rexin Dynamics. Forked from the Rexin Design System; use var(--vt-*) everywhere. ============================================================ */ :root { /* ---- Brand color ---------------------------------------- */ --vt-navy: #14263F; /* Valton Navy: primary accent */ --vt-navy-700: #0C1B30; /* hover / pressed (logo core) */ --vt-blue-400: #5B7DA8; /* light accent for dark surfaces */ --vt-blue-050: #EEF2F7; /* tint surface (day) */ --vt-ink: #16181C; /* primary text (day) */ --vt-deep: #0A1220; /* night surface (deep navy) */ --vt-white: #FFFFFF; --vt-grey: #9C9C9C; /* logo grey, secondary marks */ /* ---- Neutrals (cool, to sit beside the navy) ------------ */ --vt-n50: #F5F6F8; --vt-n100: #EBEDF1; --vt-n200: #DCDFE5; --vt-n300: #BFC5CE; --vt-n400: #939AA6; --vt-n500: #616873; /* darkened from #6A7280: that shade only hit 4.48:1 on --vt-surface, just under the 4.5:1 AA minimum for body text */ --vt-n600: #4A5160; --vt-n700: #313848; --vt-n800: #1E2432; /* ---- Functional (kept distinct from the navy) ------------ */ --vt-success: #1FA463; --vt-info: #2D7FF9; --vt-warning: #F2B100; --vt-danger: #D7342A; /* ---- Semantic roles: DAY (default light theme) ----------- */ --vt-bg: var(--vt-white); --vt-surface: var(--vt-n50); --vt-surface-2: var(--vt-n100); --vt-border: var(--vt-n200); --vt-text: var(--vt-ink); --vt-text-muted: var(--vt-n500); --vt-accent: var(--vt-navy); --vt-accent-hover: var(--vt-navy-700); --vt-on-accent: var(--vt-white); /* ---- Typography ------------------------------------------ */ --vt-font-display: "Cinzel", "Times New Roman", serif; --vt-font-label: "Montserrat", system-ui, -apple-system, sans-serif; --vt-font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --vt-font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; --vt-weight-regular: 400; --vt-weight-medium: 500; --vt-weight-semi: 600; --vt-weight-bold: 700; --vt-weight-black: 900; /* type scale (1rem = 16px), ~1.25 ratio */ --vt-size-display-xl: 4rem; --vt-size-display: 3rem; --vt-size-h1: 2.25rem; --vt-size-h2: 1.75rem; --vt-size-h3: 1.375rem; --vt-size-body-lg: 1.125rem; --vt-size-body: 1rem; --vt-size-small: 0.875rem; --vt-size-caption: 0.75rem; --vt-leading-tight: 1.12; --vt-leading-snug: 1.25; --vt-leading-body: 1.6; --vt-track-eyebrow: 0.16em; --vt-track-wordmark: 0.14em; /* ---- Spacing (4px base) ---------------------------------- */ --vt-space-1: 0.25rem; --vt-space-2: 0.5rem; --vt-space-3: 0.75rem; --vt-space-4: 1rem; --vt-space-6: 1.5rem; --vt-space-8: 2rem; --vt-space-12: 3rem; --vt-space-16: 4rem; --vt-space-24: 6rem; /* ---- Radius ----------------------------------------------- */ --vt-radius-sm: 8px; --vt-radius-md: 12px; --vt-radius-lg: 20px; --vt-radius-full: 999px; /* ---- Elevation --------------------------------------------- */ --vt-shadow-sm: 0 1px 2px rgba(12,27,48,.06), 0 1px 1px rgba(12,27,48,.04); --vt-shadow-md: 0 6px 18px rgba(12,27,48,.08); --vt-shadow-lg: 0 18px 50px rgba(12,27,48,.12); --vt-glow: 0 0 0 1px rgba(20,38,63,.35), 0 8px 40px rgba(20,38,63,.28); } /* ============================================================ NIGHT: deep navy dark theme. Apply with or .vt-night on a wrapper. ============================================================ */ [data-theme="night"], .vt-night { --vt-bg: var(--vt-deep); --vt-surface: #101A2C; --vt-surface-2: #182338; --vt-border: #26324A; --vt-text: var(--vt-white); --vt-text-muted: #93A0B5; --vt-accent: var(--vt-blue-400); --vt-accent-hover: #7396C2; --vt-on-accent: var(--vt-deep); }