/* ========================================================================== Visionary Education — Public design tokens Palette extracted from the client-approved design: clean white canvas, deep indigo / royal purple brand, restrained gold accent, pastel supporting surfaces. Every colour on the public site resolves to one of these tokens. Admin "Branding / Theme" settings override the brand tokens through the inline `--ve-*` custom properties printed in ; nothing here is final. ========================================================================== */ :root { /* ---- Brand scale ------------------------------------------------------- */ --ve-indigo-950: #0e0a2e; --ve-indigo-900: #17113f; --ve-indigo-800: #1e1656; /* dark bands (stats strip, destinations) */ --ve-indigo-700: #2a1f6f; --ve-indigo-600: #3b2b8f; --ve-indigo-500: #4c3ab0; --ve-indigo-300: #a89bdb; --ve-indigo-100: #e9e5f7; --ve-indigo-050: #f4f2fb; --ve-purple-700: #4c1d95; /* primary buttons, headings accent */ --ve-purple-600: #5b21b6; --ve-purple-500: #6d28d9; --ve-purple-100: #ede9fe; --ve-purple-050: #f5f3ff; --ve-gold-600: #c9930b; --ve-gold-500: #e5b12e; /* gold CTA / accent */ --ve-gold-400: #f2c94c; --ve-gold-100: #fdf3d3; /* Pastel support surfaces (audience cards) */ --ve-pastel-lavender: #ecebfa; --ve-pastel-cream: #fdf7e6; --ve-pastel-sky: #e6f0fd; --ve-pastel-mint: #e5f6ee; --ve-teal-500: #159a7a; --ve-blue-500: #2563eb; /* Neutrals */ --ve-ink-900: #14122a; --ve-ink-800: #1f1c36; --ve-ink-700: #33304a; --ve-ink-600: #4b4863; --ve-ink-500: #6b6884; --ve-ink-400: #8e8ba5; --ve-ink-300: #b8b6cb; --ve-ink-200: #dedde8; --ve-ink-100: #ecebf3; --ve-ink-050: #f7f7fb; --ve-white: #ffffff; /* ---- Semantic roles (admin-overridable) --------------------------------- */ --ve-primary: var(--ve-purple-700); --ve-primary-dark: var(--ve-indigo-800); --ve-primary-darker: var(--ve-indigo-900); --ve-secondary: var(--ve-indigo-600); --ve-accent: var(--ve-gold-500); --ve-accent-hover: var(--ve-gold-600); --ve-bg: var(--ve-white); --ve-surface: var(--ve-white); --ve-surface-alt: var(--ve-ink-050); --ve-surface-brand: var(--ve-indigo-050); --ve-surface-dark: var(--ve-indigo-800); --ve-text: var(--ve-ink-800); --ve-text-strong: var(--ve-ink-900); --ve-text-muted: var(--ve-ink-500); --ve-text-inverse: var(--ve-white); --ve-text-inverse-muted: rgb(255 255 255 / 0.72); --ve-border: var(--ve-ink-200); --ve-border-subtle: var(--ve-ink-100); --ve-border-strong: var(--ve-ink-300); --ve-border-inverse: rgb(255 255 255 / 0.14); --ve-success: #15803d; --ve-warning: #b45309; --ve-error: #b91c1c; --ve-focus: var(--ve-purple-500); /* ---- Typography -------------------------------------------------------- */ --ve-font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ve-font-text: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ve-text-2xs: 0.6875rem; --ve-text-xs: 0.75rem; --ve-text-sm: 0.8438rem; --ve-text-md: 0.9375rem; --ve-text-lg: 1.0625rem; --ve-text-xl: 1.25rem; --ve-text-2xl: 1.5rem; --ve-text-3xl: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem); --ve-text-4xl: clamp(2rem, 1.5rem + 2vw, 2.75rem); --ve-text-hero: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem); --ve-leading-tight: 1.15; --ve-leading-snug: 1.3; --ve-leading-normal: 1.55; --ve-leading-relaxed: 1.7; --ve-tracking-caps: 0.12em; /* ---- Spacing & layout -------------------------------------------------- */ --ve-container: 76rem; /* 1216px content width like the design */ --ve-container-wide: 84rem; --ve-gutter: clamp(1rem, 4vw, 2rem); --ve-section-y: clamp(3rem, 6vw, 5rem); --ve-section-y-tight: clamp(2rem, 4vw, 3.25rem); --ve-stack: 1.5rem; --ve-control-height: 2.75rem; --ve-header-height: 4.5rem; --ve-topbar-height: 2.25rem; /* ---- Radii & elevation ------------------------------------------------- */ --ve-radius-sm: 6px; --ve-radius-md: 10px; --ve-radius-lg: 14px; --ve-radius-xl: 20px; --ve-radius-pill: 999px; --ve-shadow-xs: 0 1px 2px rgb(20 18 42 / 0.05); --ve-shadow-sm: 0 2px 6px rgb(20 18 42 / 0.06), 0 1px 2px rgb(20 18 42 / 0.04); --ve-shadow-md: 0 8px 24px rgb(20 18 42 / 0.09), 0 2px 6px rgb(20 18 42 / 0.05); --ve-shadow-lg: 0 24px 56px rgb(20 18 42 / 0.16), 0 6px 16px rgb(20 18 42 / 0.08); --ve-shadow-brand: 0 12px 28px rgb(76 29 149 / 0.28); /* ---- Motion ------------------------------------------------------------ */ --ve-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ve-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ve-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --ve-dur-fast: 160ms; --ve-dur-base: 260ms; --ve-dur-slow: 640ms; --ve-dur-reveal: 820ms; --ve-z-header: 200; --ve-z-drawer: 300; --ve-z-scrim: 290; --ve-z-toast: 400; } @media (prefers-reduced-motion: reduce) { :root { --ve-dur-fast: 0ms; --ve-dur-base: 0ms; --ve-dur-slow: 0ms; --ve-dur-reveal: 0ms; } }