/* ========================================================================== Voris design tokens · v1.0 · June 2026 One source of truth. If a value is not a token, it does not ship. Layers: 1. primitives 2. semantic aliases 3. component tokens ========================================================================== */ :root { /* ------------------------------------------------------------------ 1 · Primitives ------------------------------------------------------------------ */ /* Color. Eleven values, no improvising. */ --voris-midnight: #0D132B; /* headlines, primary text, reversed surfaces. Never a page background */ --voris-violet: #5B3FF5; /* primary actions, links, first data series, focus */ --voris-coral: #FF6E5E; /* reserved: AI citation events and citation actions only */ --voris-bone: #F6F4F1; /* default page background */ --voris-slate: #6B7280; /* secondary text. Smallest passing text color on light grounds */ --voris-ink: #111827; /* body text */ --voris-paper: #FFFFFF; /* cards and raised surfaces on bone */ --voris-teal: #18B7A9; /* positive deltas, second data series, verified states */ --voris-sky: #8CBED6; /* third data series, decorative fills only */ --voris-amber: #C9784A; /* warnings, fourth data series, large text only */ --voris-line: #DAD7D2; /* borders, dividers, chart grids */ /* Derived text-safe variants. Use these when teal/coral/amber must be text. */ --voris-teal-text: #0C7C72; /* AA on paper and bone */ --voris-coral-text: #C23A2B; /* AA on paper and bone */ --voris-amber-text: #9A5526; /* AA on paper and bone */ --voris-violet-deep:#4630C9; /* violet text inside tinted chips */ /* Tints. The only allowed alpha overlays of brand color on light grounds. */ --voris-violet-tint: rgba(91, 63, 245, 0.10); --voris-coral-tint: rgba(255, 110, 94, 0.14); --voris-teal-tint: rgba(24, 183, 169, 0.12); --voris-amber-tint: rgba(201, 120, 74, 0.14); --voris-midnight-tint: rgba(13, 19, 43, 0.05); /* Type */ --voris-font-display: "Sora", Inter, system-ui, sans-serif; --voris-font-body: "Inter", system-ui, sans-serif; --voris-font-mono: "IBM Plex Mono", ui-monospace, monospace; /* Type scale. Size / line-height pairs. Sora never below 16px. */ --voris-text-display-xl: 600 34px/40px var(--voris-font-display); /* letter-spacing -0.01em */ --voris-text-display-md: 600 24px/30px var(--voris-font-display); --voris-text-title: 600 18px/24px var(--voris-font-display); --voris-text-body: 400 15px/24px var(--voris-font-body); --voris-text-label: 600 13px/18px var(--voris-font-body); --voris-text-data: 500 13px/18px var(--voris-font-mono); /* always tabular-nums */ --voris-text-caption: 400 12px/17px var(--voris-font-body); /* Spacing. Base-4. Component padding ≤ 24, page rhythm 32 to 64. */ --voris-space-1: 4px; --voris-space-2: 8px; --voris-space-3: 12px; --voris-space-4: 16px; --voris-space-6: 24px; --voris-space-8: 32px; --voris-space-12: 48px; --voris-space-16: 64px; /* Radius */ --voris-radius-sm: 10px; /* inputs, menu items, chips */ --voris-radius-md: 18px; /* cards, panels, tables */ --voris-radius-lg: 28px; /* hero panels, modals, large media */ --voris-radius-pill: 999px; /* buttons, badges, tabs */ /* Elevation. Resting surfaces use a border, not a shadow. Shadows are earned by movement or by floating. */ --voris-shadow-tight: 0 8px 24px rgba(13, 19, 43, 0.10); /* hover lift */ --voris-shadow-soft: 0 18px 60px rgba(13, 19, 43, 0.12); /* popovers, toasts, modals */ /* Motion. One curve, three durations. Respect prefers-reduced-motion. */ --voris-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --voris-duration-fast: 150ms; /* micro feedback: press, toggle */ --voris-duration-base: 220ms; /* surface changes: hover, tabs */ --voris-duration-slow: 320ms; /* page and step entries */ /* Z scale */ --voris-z-raised: 10; --voris-z-sticky: 40; --voris-z-nav: 50; --voris-z-overlay: 90; --voris-z-toast: 100; /* ------------------------------------------------------------------ 2 · Semantic aliases. Components consume these, not primitives. ------------------------------------------------------------------ */ --voris-bg: var(--voris-bone); --voris-surface: var(--voris-paper); --voris-surface-invert:var(--voris-midnight); --voris-text: var(--voris-ink); --voris-text-strong: var(--voris-midnight); --voris-text-muted: var(--voris-slate); --voris-text-invert: var(--voris-paper); --voris-border: var(--voris-line); --voris-accent: var(--voris-violet); --voris-accent-text: var(--voris-paper); /* white passes on violet, 6.0:1 */ --voris-positive: var(--voris-teal-text); --voris-negative: var(--voris-amber-text); --voris-citation: var(--voris-coral); /* the one job coral has */ --voris-focus-ring: 0 0 0 2px var(--voris-bg), 0 0 0 4px var(--voris-violet); /* ------------------------------------------------------------------ 3 · Component tokens ------------------------------------------------------------------ */ /* Buttons. Pill, sentence case, one primary per view. Labels: paper on violet/midnight, midnight on coral/teal. Never white on coral (2.7:1 fails) or white on teal (2.5:1 fails). */ --voris-btn-radius: var(--voris-radius-pill); --voris-btn-pad: 9px 18px; --voris-btn-primary-bg: var(--voris-violet); --voris-btn-primary-fg: var(--voris-paper); --voris-btn-citation-bg: var(--voris-coral); --voris-btn-citation-fg: var(--voris-midnight); /* Inputs */ --voris-input-radius: var(--voris-radius-sm); --voris-input-border: var(--voris-line); --voris-input-border-focus: var(--voris-violet); --voris-input-ring-focus: 0 0 0 3px rgba(91, 63, 245, 0.18); --voris-input-border-invalid: var(--voris-coral); --voris-input-ring-invalid: 0 0 0 3px rgba(255, 110, 94, 0.16); /* Charts. Series order is fixed. Coral is never a series, it is an annotation marking an AI citation event. */ --voris-chart-series-1: var(--voris-violet); --voris-chart-series-2: var(--voris-teal); --voris-chart-series-3: var(--voris-sky); --voris-chart-series-4: var(--voris-amber); --voris-chart-grid: var(--voris-line); --voris-chart-axis-text: var(--voris-slate); --voris-chart-annotation: var(--voris-coral); --voris-chart-tooltip-bg: var(--voris-midnight); --voris-chart-tooltip-fg: var(--voris-paper); } /* -------------------------------------------------------------------- Base behaviors that travel with the tokens -------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--voris-violet); outline-offset: 2px; } ::selection { background: rgba(91, 63, 245, 0.16); } @media (prefers-reduced-motion: reduce) { :root { --voris-duration-fast: 0.01ms; --voris-duration-base: 0.01ms; --voris-duration-slow: 0.01ms; } } /* -------------------------------------------------------------------- Contrast reference, measured against WCAG 2.1 -------------------------------------------------------------------- midnight on paper 17.9:1 AAA ink on paper 17.4:1 AAA slate on paper 4.8:1 AA normal text, smallest passing color violet on paper 6.0:1 AA normal text paper on violet 6.0:1 AA button labels paper on midnight 18.3:1 AAA midnight on coral 6.7:1 AA button labels midnight on teal 7.3:1 AA coral on paper 2.7:1 fails text · graphics and markers only teal on paper 2.5:1 fails text · use --voris-teal-text instead sky on paper 1.9:1 fails · decorative fills only -------------------------------------------------------------------- */