/* ========================================================================= VENDORED FILE. Do not edit here. Source of truth: wovu/packages/ui/tokens.css (the @wovu/ui design tokens, WP-100, founder-approved). wovu.dev lives in its own repository and has no build step, so the token file is copied in verbatim rather than imported. When the product tokens change, re-copy this file; never patch it locally. Copied: 2026-07-29 from wovu@main, packages/ui/tokens.css. The one thing this repo adds is a definition for --font-geist-sans and --font-geist-mono (referenced below by --font-ui / --font-mono). In the app the `geist` npm package sets them; here fonts.css does. Everything below this banner is unmodified. ========================================================================= */ /* ========================================================================= @wovu/ui — design tokens (WP-100) Extracted from apps/web/app/globals.css (v1, founder-approved) and from the literal values already shipped in the entry screen (app/page.tsx, app/components/SignInCard.tsx, app/components/SessionObject.tsx). Nothing in this file is a new design decision: every value here already existed in the app before this token layer was built. This is the foundation later frontend work packages (WP-101+) reach for instead of retyping a magic number. Direction: visionOS spatial materials + Claude warmth (founder-chosen). A lit, dimensional environment; frosted glass surfaces with vibrancy and specular edges; warm clay/coral used as LIGHT, not fill. Sections: 1. Environment + glass materials 2. Text colours 3. Accent (clay/coral) + presence hues 4. Effect colours (glow, button, surface) — bespoke-but-recurring tints 5. Elevation (shadows) 6. Radii 7. Motion (easing + duration) 8. Type: font families, sizes, tracking 9. Spacing 10. Size (element dimensions — avatars, dots, icons) 11. Focus ring ========================================================================= */ :root { /* --- 1. Environment + glass materials ---------------------------------- */ --env-base: #0c0b0a; --env-base-2: #100e0c; --warm-light: 28 90% 62%; /* amber, as HSL parts for glows */ --cool-light: 210 80% 66%; /* cool counter-light for dimensionality */ --glass-1: rgba(255, 253, 250, 0.055); --glass-2: rgba(255, 253, 250, 0.085); --glass-3: rgba(255, 253, 250, 0.11); --glass-border: rgba(255, 250, 244, 0.12); --glass-border-strong: rgba(255, 250, 244, 0.2); --glass-specular: rgba(255, 255, 255, 0.3); /* top-edge highlight */ --blur: 30px; --blur-heavy: 48px; --blur-orb: 70px; /* the .light-orb primitive's blur radius */ /* --- 2. Text colours: warm whites, never pure #fff ---------------------- */ --text-hi: rgba(255, 251, 246, 0.94); --text-mid: rgba(253, 246, 240, 0.6); --text-low: rgba(253, 246, 240, 0.38); --text-faint: rgba(253, 246, 240, 0.22); /* --- 3. Accent (clay/coral, used as light) + presence hues -------------- */ --accent: #ef9470; --accent-deep: #dd7a52; --accent-glow: rgba(238, 140, 100, 0.5); --accent-wash: rgba(238, 140, 100, 0.1); /* Presence hues: muted, controlled — teammate markers only. */ --p-rose: #e6a3ad; --p-aqua: #8ed2c6; --p-gold: #e3c368; --p-lilac: #b6acd8; /* --- 4. Effect colours: recurring tints behind named primitives --------- */ /* `.light-orb` ambient glows (hero + session-object atmosphere). */ --glow-orb-warm-strong: rgba(255, 150, 80, 0.32); --glow-orb-warm-mid: rgba(255, 120, 70, 0.1); --glow-orb-warm-soft: rgba(255, 150, 80, 0.16); --glow-orb-cool-soft: rgba(120, 170, 255, 0.2); /* Primary button (the "Continue" treatment): warm gradient + dark ink. */ --button-primary-start: #ffd8a8; --button-primary-ink: #1a1206; --button-primary-border: rgba(255, 190, 130, 0.5); --specular-soft: rgba(255, 255, 255, 0.5); --sheen-color: rgba(255, 255, 255, 0.55); /* Gradient-text treatment (the "live session" headline highlight). */ --text-gradient-start: #fff5ea; /* Recessed input surface. */ --surface-input: rgba(0, 0, 0, 0.28); /* Presence avatar ring, sits on the environment colour. */ --avatar-ring: rgba(12, 11, 10, 0.85); /* --- 5. Elevation: soft ambient shadows (visionOS floats, not drops) ---- */ --shadow-float: 0 1px 0 0 var(--glass-specular) inset, 0 24px 60px -24px rgba(0, 0, 0, 0.7), 0 8px 24px -12px rgba(0, 0, 0, 0.5); --shadow-lift: 0 1px 0 0 var(--glass-specular) inset, 0 40px 100px -30px rgba(0, 0, 0, 0.8), 0 12px 40px -12px rgba(0, 0, 0, 0.6); /* --- 6. Radii: generous, visionOS-soft ----------------------------------- */ --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; --r-pill: 999px; /* --- 7. Motion: spring-like easings + honest durations ------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-1: 0.18s; --dur-2: 0.4s; --dur-3: 0.7s; /* --- 8a. Type: font families --------------------------------------------- */ --font-ui: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif; --font-mono: var(--font-geist-mono), ui-monospace, "SF Mono", monospace; /* --- 8b. Type: size catalogue -------------------------------------------- Named by the exact px value already shipped (self-describing; no new sizes invented). Fluid (clamp) sizes are named for the role they fill, since a single px value can't describe a responsive range. */ --text-2xs: 11px; /* spine labels, station numerals */ --text-2xs-plus: 11.5px; /* mono chip copy, "live" label */ --text-xs: 12px; /* eyebrow, footer mono line */ --text-xs-plus: 12.5px; /* form labels, pill badge, secondary chip text */ --text-sm: 13px; /* station body copy, "session" mono label */ --text-sm-plus: 14.5px; /* input text, primary button label */ --text-base: 15px; /* card heading, station titles */ --text-lg: 20px; /* wordmark */ --text-hero-sub: clamp(15px, 1.4vw, 17px); /* hero supporting paragraph */ --text-hero: clamp(42px, 5.4vw, 66px); /* hero headline */ /* --- 8c. Type: tracking (letter-spacing) catalogue ----------------------- */ --tracking-body: -0.011em; --tracking-heading: -0.03em; /* wordmark */ --tracking-display: -0.035em; /* hero headline */ --tracking-mono: 0.01em; /* .mono base */ --tracking-mono-wide: 0.04em; /* footer mono line */ --tracking-eyebrow: 0.16em; /* uppercase eyebrow */ /* --- 9. Spacing catalogue ------------------------------------------------- Named by the exact px value already shipped (padding/margin/gap only — position-derived geometry, like the SessionObject connector line's coordinate math, is intentionally left as literal at the call site; see packages/ui/README.md). Fluid values are named for the role they fill. */ --space-2: 2px; --space-3: 3px; --space-6: 6px; --space-7: 7px; --space-8: 8px; --space-9: 9px; --space-10: 10px; --space-12: 12px; --space-13: 13px; --space-14: 14px; --space-16: 16px; --space-20: 20px; --space-22: 22px; --space-24: 24px; --space-26: 26px; --space-30: 30px; --space-32: 32px; --space-36: 36px; --space-40: 40px; --space-64: 64px; --space-72: 72px; --space-fluid-page-pad: clamp(20px, 4vw, 40px); /* main page padding */ --space-fluid-header-pad: clamp(28px, 6vw, 64px); /* header bottom padding */ --space-fluid-hero-gap: clamp(32px, 5vw, 72px); /* hero grid column gap */ /* --- 10. Size: element dimensions (avatars, dots, icons, orbs) ----------- */ --size-6: 6px; /* status dot */ --size-7: 7px; /* status dot (card) */ --size-8: 8px; /* status dot (session object) */ --size-10: 10px; /* traveling light on the connector spine */ --size-12: 12px; /* station ring */ --size-26: 26px; /* presence avatar */ --size-60: 60px; /* button sheen sweep width */ --size-240: 240px; /* light orb, small */ --size-300: 300px; /* light orb, medium */ --size-380: 380px; /* light orb, large; also the sign-in card max-width */ --size-460: 460px; /* hero copy column max-width */ --size-560: 560px; /* hero copy block max-width */ --size-1200: 1200px; /* page container max-width */ /* --- 11. Focus ring (WCAG 2.2 AA floor) ---------------------------------- */ --focus-ring-width: 2px; --focus-ring-offset: 3px; --focus-ring-radius: 6px; }