/* ============================================================================ OUTLEX DESIGN SYSTEM — v2 Precision + Atmosphere Version: 2.0.0 Date: 2026-06-10 Direction: B "Precision + Atmosphere" — approved by founder 2026-06-10 Strategy: - Dark-first (`:root` = dark theme). Override via [data-theme="light"]. - `@media (prefers-color-scheme: light)` can also trigger the light overrides — wrap the [data-theme="light"] block in a `@media (prefers-color-scheme: light)` query if you want OS-level auto-switching. Default keeps explicit data-attr control so the toggle is deterministic. - OKLCH throughout: perceptually-uniform, contrast-by-construction. - Additive: legacy tokens.css is UNTOUCHED. Consumers migrate on their own schedule. Name collision risk: v2 uses `--ox-*` prefix; legacy uses `--v7-*`. ============================================================================ */ /* ============================================================================ SECTION 1 — COLOR PRIMITIVES Full 11-step OKLCH ramps for all palette families. Naming: --ox-{family}-{step} step ∈ {50,100,200,300,400,500,600,700,800,900,950} ============================================================================ */ :root { /* ---- SAGE (primary CTA / success / foliage) ---- */ --ox-sage-50: oklch(0.97 0.020 150deg); --ox-sage-100: oklch(0.94 0.040 150deg); --ox-sage-200: oklch(0.88 0.060 150deg); --ox-sage-300: oklch(0.75 0.090 150deg); --ox-sage-400: oklch(0.68 0.100 150deg); --ox-sage-500: oklch(0.60 0.100 150deg); --ox-sage-600: oklch(0.52 0.100 150deg); --ox-sage-700: oklch(0.45 0.090 150deg); --ox-sage-800: oklch(0.37 0.075 150deg); --ox-sage-900: oklch(0.28 0.055 150deg); --ox-sage-950: oklch(0.20 0.035 150deg); /* ---- AMBER (warning/pending dots + deadline meta text ONLY — NOT an AI/Lexi colour) ---- */ /* Amber is the WARNING accent. Tiny dots, deadline meta text, focus rings. NEVER loud fills. */ /* AI/Lexi accent colour is TEAL (#54D6A4) via --ox-ai-accent. See dot-chip grammar below. */ --ox-amber-50: oklch(0.98 0.020 75deg); --ox-amber-100: oklch(0.96 0.040 75deg); --ox-amber-200: oklch(0.92 0.080 75deg); --ox-amber-300: oklch(0.85 0.130 75deg); --ox-amber-400: oklch(0.78 0.140 75deg); --ox-amber-500: oklch(0.70 0.140 75deg); --ox-amber-600: oklch(0.62 0.130 75deg); --ox-amber-700: oklch(0.54 0.110 75deg); --ox-amber-800: oklch(0.44 0.090 75deg); --ox-amber-900: oklch(0.34 0.065 75deg); --ox-amber-950: oklch(0.24 0.040 75deg); /* ---- TERRACOTTA (warning / destructive) ---- */ --ox-terracotta-50: oklch(0.97 0.020 28deg); --ox-terracotta-100: oklch(0.94 0.040 28deg); --ox-terracotta-200: oklch(0.89 0.070 28deg); --ox-terracotta-300: oklch(0.80 0.120 28deg); --ox-terracotta-400: oklch(0.70 0.150 28deg); --ox-terracotta-500: oklch(0.60 0.160 28deg); --ox-terracotta-600: oklch(0.52 0.155 28deg); --ox-terracotta-700: oklch(0.44 0.140 28deg); --ox-terracotta-800: oklch(0.35 0.110 28deg); --ox-terracotta-900: oklch(0.26 0.075 28deg); --ox-terracotta-950: oklch(0.18 0.045 28deg); /* ---- BLUE (informational / interactive / brand link) ---- */ --ox-blue-50: oklch(0.97 0.020 270deg); --ox-blue-100: oklch(0.94 0.040 270deg); --ox-blue-200: oklch(0.88 0.080 270deg); --ox-blue-300: oklch(0.78 0.130 270deg); --ox-blue-400: oklch(0.65 0.170 270deg); --ox-blue-500: oklch(0.57 0.150 270deg); --ox-blue-600: oklch(0.50 0.140 270deg); --ox-blue-700: oklch(0.42 0.125 270deg); --ox-blue-800: oklch(0.33 0.100 270deg); --ox-blue-900: oklch(0.24 0.070 270deg); --ox-blue-950: oklch(0.16 0.040 270deg); /* ---- NEUTRAL (dark theme — 12-step cool-neutral ladder) ---- */ /* Dark-first: these are used in :root. Light overrides below. */ --ox-neutral-0: oklch(0.085 0.010 270deg); /* deepest pit — document chrome underlayer */ --ox-neutral-50: oklch(0.10 0.012 270deg); /* near-black page base variant */ --ox-neutral-100: oklch(0.12 0.015 270deg); /* --ox-surface-0 = page base */ --ox-neutral-150: oklch(0.14 0.012 270deg); /* sidebars */ --ox-neutral-200: oklch(0.16 0.012 270deg); /* --ox-surface-1 = panels */ --ox-neutral-250: oklch(0.18 0.011 270deg); /* mid-elevation */ --ox-neutral-300: oklch(0.20 0.010 270deg); /* --ox-surface-2 = cards */ --ox-neutral-400: oklch(0.24 0.008 270deg); /* --ox-surface-3 = hover */ --ox-neutral-500: oklch(0.28 0.008 270deg); /* --ox-surface-4 = highest elevation */ --ox-neutral-600: oklch(0.40 0.006 270deg); /* muted borders / inactive text */ --ox-neutral-700: oklch(0.55 0.005 270deg); /* secondary text lower bound */ --ox-neutral-900: oklch(0.82 0.006 270deg); /* secondary text */ --ox-neutral-950: oklch(0.97 0.005 270deg); /* primary text / near-white */ } /* ============================================================================ SECTION 2 — DARK THEME SEMANTIC TOKENS :root is the canonical dark theme. ============================================================================ */ :root { /* ---- SURFACE LADDER (dark: lightness-lift elevation) ---- */ --ox-surface-0: oklch(0.12 0.015 270deg); /* page base — near-black #0C0B12 */ --ox-surface-1: oklch(0.16 0.012 270deg); /* elevated panels */ --ox-surface-2: oklch(0.20 0.010 270deg); /* elevated cards */ --ox-surface-3: oklch(0.24 0.008 270deg); /* hover state / active items */ --ox-surface-4: oklch(0.28 0.008 270deg); /* highest elevation / tooltips */ /* ---- SEMANTIC BACKGROUNDS ---- */ --ox-bg: var(--ox-surface-0); --ox-panel: var(--ox-surface-1); --ox-card: var(--ox-surface-2); /* ---- FOREGROUND (4 text tiers, WCAG AA on dark base) ---- */ --ox-fg-primary: oklch(0.97 0.005 270deg); /* headlines, active nav, ~#F5F4F2 */ --ox-fg-secondary: oklch(0.82 0.006 270deg); /* body copy — ≥4.5:1 on surface-0 */ --ox-fg-muted: oklch(0.68 0.006 270deg); /* meta, labels — ≥3:1 on surface-0 */ --ox-fg-chips: oklch(0.78 0.006 270deg); /* chip labels / caps text */ --ox-fg-inverse: oklch(0.12 0.015 270deg); /* dark text on light buttons */ /* ---- BORDERS (2 tiers) ---- */ --ox-border: oklch(0.28 0.010 270deg); /* base border */ --ox-border-subtle: oklch(0.22 0.008 270deg); /* hairlines / dividers */ /* ---- PRIMARY CTA — Sage gradient ---- */ --ox-cta-bg: linear-gradient(180deg, #7BA081, #5F8266); --ox-cta-bg-hover: linear-gradient(180deg, #8BAD91, #6F9276); --ox-cta-bg-active: linear-gradient(180deg, #6B9070, #557258); --ox-cta-fg: #F0EDE8; /* warm white — high contrast on sage */ --ox-cta-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 16px oklch(0.60 0.10 150deg / 0.35); --ox-cta-shadow-hover: 0 2px 4px rgba(0,0,0,0.35), 0 6px 20px oklch(0.60 0.10 150deg / 0.45); --ox-cta-shadow-active: 0 1px 2px rgba(0,0,0,0.4), 0 2px 8px oklch(0.60 0.10 150deg / 0.20); /* ---- AI / LEXI SEMANTIC TOKENS (neutral grammar — teal dot accent) ---- */ /* * AI message cards are NEUTRAL — identical to elevated card (surface-1 gradient, neutral border). * Teal (#54D6A4) is the AI dot accent. Amber is the WARNING accent. They do not swap. * * DOT-CHIP GRAMMAR (Linear-style, rule 7): * - Each status chip = neutral surface + neutral border + fg-secondary label + 4-5px leading dot. * - Colour lives ONLY in the dot — NEVER in the chip background or label text. * - Dot palette: red/terracotta = HIGH/overdue | amber = needs-review/pending | * sage = ready/done | teal (#54D6A4) = AI/citation * - Light theme: same dots, white chip, #E2DDD6 border, #4A4641 text. * * ONE-ACCENT-PER-ELEMENT RULE (rule 8 / Linear rule): * Icon containers: monochrome bg rgba(255,255,255,0.06), icon stroke fg-secondary. * Severity/state lives in the row's dot chip ONLY — never also in icon colour. * NEVER: coloured icon + coloured label on the same element. */ --ox-ai-surface: oklch(0.16 0.012 270deg); /* same as elevated panel (surface-1) — neutral */ --ox-ai-border: rgba(255,255,255,0.07); /* same as neutral card border */ --ox-ai-accent: #54D6A4; /* teal — AI dot accent (NEW, replaces amber-as-AI) */ --ox-ai-text: oklch(0.82 0.006 270deg); /* fg-secondary — neutral body copy */ --ox-ai-icon-bg: rgba(255,255,255,0.06); /* monochrome icon container bg */ /* ---- STATUS TOKENS ---- */ --ox-success: var(--ox-sage-500); --ox-success-surface: oklch(0.60 0.10 150deg / 0.15); --ox-success-border: oklch(0.60 0.10 150deg / 0.35); --ox-warning: var(--ox-amber-500); --ox-warning-surface: oklch(0.70 0.14 75deg / 0.15); --ox-warning-border: oklch(0.70 0.14 75deg / 0.35); --ox-danger: var(--ox-terracotta-500); --ox-danger-surface: oklch(0.60 0.15 28deg / 0.15); --ox-danger-border: oklch(0.60 0.15 28deg / 0.35); --ox-info: var(--ox-blue-400); --ox-info-surface: oklch(0.57 0.15 270deg / 0.15); --ox-info-border: oklch(0.57 0.15 270deg / 0.35); /* ---- DEPTH TOKENS ---- */ /* 1px inset top-edge highlight — Linear signature on elevated cards */ --ox-inset-highlight: rgba(255,255,255,0.08); /* Mark / logo glow — used in empty states, hero backdrops */ --ox-glow-mark: drop-shadow(0 0 28px oklch(0.57 0.15 270deg / 0.50)); /* CTA glow — beneath primary sage buttons */ --ox-glow-cta: 0 4px 16px oklch(0.60 0.10 150deg / 0.35); /* Shadow stack (4-layer warm-tinted) */ --ox-shadow-1: 0px 1px 2px oklch(0.05 0.02 270deg / 0.50), 0px 2px 6px oklch(0.05 0.02 270deg / 0.35); --ox-shadow-2: 0px 1px 2px oklch(0.05 0.02 270deg / 0.50), 0px 2px 8px oklch(0.05 0.02 270deg / 0.40), 0px 4px 20px oklch(0.05 0.02 270deg / 0.30), 0px 8px 40px oklch(0.05 0.02 270deg / 0.20); --ox-shadow-3: 0px 2px 4px oklch(0.05 0.02 270deg / 0.50), 0px 4px 16px oklch(0.05 0.02 270deg / 0.40), 0px 12px 40px oklch(0.05 0.02 270deg / 0.35), 0px 20px 60px oklch(0.05 0.02 270deg / 0.25); --ox-shadow-4: 0px 4px 12px oklch(0.05 0.02 270deg / 0.60), 0px 12px 40px oklch(0.05 0.02 270deg / 0.50), 0px 24px 80px oklch(0.05 0.02 270deg / 0.35), 0px 40px 120px oklch(0.05 0.02 270deg / 0.25); /* ---- AMBIENT ORB TOKENS ---- */ --ox-orb-blur: 120px; --ox-orb-sage-color: oklch(0.60 0.10 150deg / 0.18); --ox-orb-sage-opacity: 1; --ox-orb-blue-color: oklch(0.57 0.15 270deg / 0.14); --ox-orb-blue-opacity: 1; --ox-orb-amber-color: oklch(0.70 0.14 75deg / 0.10); --ox-orb-amber-opacity: 1; /* ---- GRAIN ---- */ /* Usage: apply .ox-grain class or ::after pseudo-element with mix-blend-mode:overlay */ /* opacity: 0.04 (dark) — see GRAMMAR.md for the full SVG data URI snippet */ --ox-grain-opacity-dark: 0.04; --ox-grain-opacity-light: 0.03; --ox-grain-blend-dark: overlay; --ox-grain-blend-light: multiply; } /* ============================================================================ SECTION 3 — LIGHT THEME OVERRIDES Apply via [data-theme="light"] or wrap in @media (prefers-color-scheme: light) for OS-level auto-switching. ============================================================================ */ /* To enable OS-level auto-switching, replace the selector below with: @media (prefers-color-scheme: light) { :root { ... } } Or use both: the data-attr allows explicit override; the media-query is the fallback. */ [data-theme="light"] { /* ---- NEUTRAL — light theme 12-step ladder ---- */ --ox-neutral-100: oklch(0.962 0.010 80deg); /* warm cream page base ≈ #F5F1EA */ --ox-neutral-150: oklch(0.968 0.008 80deg); /* sidebars — one step lighter than page */ --ox-neutral-200: #FFFFFF; /* white panels / cards */ --ox-neutral-250: oklch(0.994 0.003 80deg); /* near-white elevated card */ --ox-neutral-300: oklch(0.990 0.003 80deg); /* very light elevated */ --ox-neutral-400: oklch(0.950 0.010 80deg); /* hover state */ --ox-neutral-500: oklch(0.935 0.012 80deg); /* depressed / active */ --ox-neutral-600: oklch(0.86 0.015 80deg); /* base border ≈ #DCD5CA — visible, not ghost */ --ox-neutral-700: oklch(0.90 0.010 80deg); /* subtle border / hairlines ≈ #E8E2D8 */ --ox-neutral-900: #4A4641; /* secondary text */ --ox-neutral-950: #231F20; /* primary text — near-black ink */ /* ---- SURFACE LADDER (light: white cards on warm-cream page) ---- */ --ox-surface-0: oklch(0.962 0.010 80deg); /* warm cream page ≈ #F5F1EA — designed paper */ --ox-surface-1: #FFFFFF; /* white panels */ --ox-surface-2: oklch(0.994 0.003 80deg); /* near-white elevated card (pops on cream bg) */ --ox-surface-3: oklch(0.950 0.010 80deg); /* hover state */ --ox-surface-4: oklch(0.935 0.012 80deg); /* depressed / highest elevation */ /* ---- SEMANTIC BACKGROUNDS ---- */ --ox-bg: var(--ox-surface-0); --ox-panel: var(--ox-surface-1); --ox-card: var(--ox-surface-2); /* ---- FOREGROUND (ink on warm paper — contrast verified on cream bg) ---- */ --ox-fg-primary: #231F20; /* near-black ink */ --ox-fg-secondary: #4A4641; /* warm dark grey */ --ox-fg-muted: #6B6460; /* muted warm grey */ --ox-fg-chips: #8A847C; /* chip labels */ --ox-fg-inverse: oklch(0.962 0.010 80deg); /* cream on dark buttons */ /* ---- BORDERS (visible, warm — not ghosts) ---- */ --ox-border: oklch(0.86 0.015 80deg); /* card border ≈ #DCD5CA — clearly visible */ --ox-border-subtle: oklch(0.90 0.010 80deg); /* hairlines / dividers ≈ #E8E2D8 */ /* ---- PRIMARY CTA — sage, identical gradient (works on both themes) ---- */ --ox-cta-bg: linear-gradient(180deg, #7BA081, #6B8F71); --ox-cta-bg-hover: linear-gradient(180deg, #8BAD91, #7B9F81); --ox-cta-bg-active: linear-gradient(180deg, #6B9070, #5F8266); --ox-cta-fg: #F0EDE8; --ox-cta-shadow: 0 1px 2px rgba(40,35,30,0.12), 0 3px 10px oklch(0.60 0.10 150deg / 0.30), 0 6px 20px oklch(0.60 0.10 150deg / 0.20); --ox-cta-shadow-hover: 0 2px 4px rgba(40,35,30,0.14), 0 6px 20px oklch(0.60 0.10 150deg / 0.40); --ox-cta-shadow-active: 0 1px 2px rgba(40,35,30,0.15), 0 2px 8px oklch(0.60 0.10 150deg / 0.15); /* ---- AI / LEXI (neutral on light — teal dot accent unchanged) ---- */ --ox-ai-surface: #FFFFFF; /* white panel — same as surface-1 light */ --ox-ai-border: oklch(0.90 0.010 80deg); /* hairline border — matches border-subtle */ --ox-ai-accent: #54D6A4; /* teal AI dot accent — same both themes */ --ox-ai-text: #4A4641; /* fg-secondary light — neutral */ --ox-ai-icon-bg: linear-gradient(180deg,#F6F1E9,#EFE9DF); /* warm-tinted icon container bg */ /* ---- SAGE — light-adapted accent tones ---- */ --ox-sage-500: oklch(0.55 0.11 150deg); /* deeper for contrast on light */ --ox-sage-600: oklch(0.48 0.10 150deg); /* ---- AMBER — light-adapted ---- */ --ox-amber-500: oklch(0.65 0.13 75deg); /* readable on white */ --ox-amber-600: oklch(0.56 0.12 75deg); /* ---- BLUE — light-adapted ---- */ --ox-blue-400: oklch(0.55 0.17 270deg); --ox-blue-500: oklch(0.48 0.16 270deg); /* ---- STATUS TOKENS (light-adapted) ---- */ --ox-success-surface: oklch(0.55 0.11 150deg / 0.10); --ox-success-border: oklch(0.55 0.11 150deg / 0.30); --ox-warning-surface: oklch(0.65 0.13 75deg / 0.10); --ox-warning-border: oklch(0.65 0.13 75deg / 0.30); --ox-danger-surface: oklch(0.60 0.15 28deg / 0.10); --ox-danger-border: oklch(0.60 0.15 28deg / 0.30); --ox-info-surface: oklch(0.55 0.17 270deg / 0.10); --ox-info-border: oklch(0.55 0.17 270deg / 0.30); /* ---- INSET HIGHLIGHT (strong on white cards against cream bg) ---- */ --ox-inset-highlight: rgba(255,255,255,0.95); /* ---- GLOW TOKENS (light: felt, not absent) ---- */ --ox-glow-mark: drop-shadow(0 0 20px oklch(0.57 0.15 270deg / 0.25)); --ox-glow-cta: 0 3px 10px oklch(0.55 0.11 150deg / 0.28); /* ---- SHADOW STACK (light: raised ~35% — cards pop on warm-cream page) ---- */ --ox-shadow-1: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 2px rgba(45,38,28,0.07), 0 2px 6px rgba(45,38,28,0.06); --ox-shadow-2: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 2px rgba(45,38,28,0.07), 0 4px 10px rgba(45,38,28,0.08), 0 12px 32px rgba(45,38,28,0.09); --ox-shadow-3: inset 0 1px 0 rgba(255,255,255,0.95), 0 2px 4px rgba(45,38,28,0.08), 0 8px 24px rgba(45,38,28,0.11), 0 20px 60px rgba(45,38,28,0.10), 0 32px 80px rgba(45,38,28,0.07); --ox-shadow-4: inset 0 1px 0 rgba(255,255,255,0.95), 0 4px 12px rgba(45,38,28,0.09), 0 12px 40px rgba(45,38,28,0.12), 0 24px 80px rgba(45,38,28,0.10), 0 40px 120px rgba(45,38,28,0.07); /* ---- AMBIENT ORBS (bumped presence in light — must be FELT) ---- */ --ox-orb-sage-color: rgba(107,143,113,0.20); /* was .14 — bumped */ --ox-orb-sage-opacity: 1; --ox-orb-blue-color: rgba(48,106,239,0.12); /* was .08 — bumped */ --ox-orb-blue-opacity: 1; --ox-orb-amber-color: rgba(196,148,50,0.14); /* was .10 — bumped */ --ox-orb-amber-opacity: 1; /* ---- GRAIN (4% multiply in light) ---- */ --ox-grain-opacity-light: 0.04; /* was 0.03 */ } /* ============================================================================ SECTION 4 — TYPOGRAPHY TOKENS These are theme-independent (same fonts in both themes). ============================================================================ */ :root { /* ---- FONT FAMILIES ---- */ /* Commercial targets in order; free fallbacks follow automatically. */ --ox-font-display: 'Tiempos Headline', 'Newsreader', 'Georgia', 'Times New Roman', serif; /* Tiempos Headline (Klim, ~$240/yr) — institutional authority, Anthropic-grade. Newsreader (Google Fonts, free) — approved interim stand-in. Always weight 400; italic for editorial em emphasis. */ --ox-font-sans: 'Inter', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', sans-serif; /* Inter via Google Fonts (free). font-feature-settings: 'calt','kern','liga','cv11','tnum','zero' Use font-variation-settings: 'wght' 450 for body text (variable font axis). */ --ox-font-mono: 'Berkeley Mono', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; /* Berkeley Mono (commercial, ~$75) — primary target for legal citations, case refs. JetBrains Mono (Google Fonts, free) — approved interim stand-in. Use weight 300 for metadata, 400 for code blocks. */ /* ---- TYPE SCALE (px values; rem equivalents in comments) ---- */ --ox-text-hero: 56px; /* 3.5rem — marketing masthead, display-xl */ --ox-text-display-lg: 36px; /* 2.25rem — section headers, page titles */ --ox-text-display: 28px; /* 1.75rem — card titles, modal headers */ --ox-text-title: 20px; /* 1.25rem — list group headers, widget titles */ --ox-text-body: 15px; /* 0.9375rem — primary reading text */ --ox-text-meta: 12px; /* 0.75rem — timestamps, helper text, captions */ --ox-text-chip: 11px; /* 0.6875rem — status chips, badge labels */ /* ---- TRACKING (letter-spacing) ---- */ --ox-tracking-display: -0.03em; /* hero / display-lg at 28px+ — tightest */ --ox-tracking-title: -0.02em; /* title-level headings */ --ox-tracking-body: -0.01em; /* body copy — slight tightening */ --ox-tracking-caps: 0.09em; /* uppercase label-caps / chip text */ --ox-tracking-caps-wide: 0.12em; /* eyebrow / section divider caps */ --ox-tracking-mono: 0.02em; /* mono citations / legal refs */ /* ---- FONT WEIGHTS ---- */ --ox-weight-display: 400; /* Tiempos Headline / Newsreader — NEVER bold; editorial grace */ --ox-weight-body: 450; /* Inter variable axis — legibility at small legal-data sizes */ --ox-weight-medium: 500; /* Nav items, button labels, chip text */ --ox-weight-semibold: 600; /* MAX ALLOWED — strong emphasis, never higher */ /* ---- LINE HEIGHTS ---- */ --ox-leading-display: 1.05; --ox-leading-tight: 1.15; --ox-leading-body: 1.60; --ox-leading-loose: 1.75; /* AI/Lexi response bubbles */ } /* ============================================================================ SECTION 5 — SPACING (8px grid) All values are multiples of 8px. Note: 20px (--ox-space-5) is intentionally included but should be avoided in favour of --ox-space-6 (24px). ============================================================================ */ :root { --ox-space-1: 4px; /* sub-grid — micro padding only (inner chip, icon padding) */ --ox-space-2: 8px; /* base grid unit */ --ox-space-3: 12px; /* 1.5× */ --ox-space-4: 16px; /* 2× */ --ox-space-5: 20px; /* 2.5× — AVOID; prefer --ox-space-6 */ --ox-space-6: 24px; /* 3× */ --ox-space-8: 32px; /* 4× */ --ox-space-10: 40px; /* 5× */ --ox-space-12: 48px; /* 6× */ --ox-space-16: 64px; /* 8× */ --ox-space-20: 80px; /* 10× */ --ox-space-24: 96px; /* 12× */ /* ---- BORDER RADII ---- */ --ox-radius-sm: 4px; /* chips, badges, kbd */ --ox-radius-md: 8px; /* buttons, inputs, nav items */ --ox-radius-lg: 12px; /* cards, panels, stat blocks */ --ox-radius-xl: 14px; /* chat input card, main content areas */ --ox-radius-2xl: 16px; /* product frames, hero screenshots */ --ox-radius-full: 9999px; /* pills, avatars */ } /* ============================================================================ SECTION 6 — MOTION TOKENS ============================================================================ */ :root { /* Primary easing — fast out, slow deceleration (premium ease) */ --ox-ease: cubic-bezier(0.23, 1, 0.32, 1); /* Spring easing — overshoot for interactive delight moments */ --ox-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Entry duration — generous reveal (200ms+) */ --ox-enter: 220ms; /* Exit duration — snappy dismiss (130ms) */ --ox-exit: 130ms; /* Button press / micro-interaction (80ms) */ --ox-press: 80ms; /* Orb pulse cycle (8s) */ --ox-orb-cycle: 8s; /* * Spring physics (Framer Motion / React Spring notation): * { type: 'spring', stiffness: 260, damping: 20 } * Equivalent CSS spring: cubic-bezier(0.34, 1.56, 0.64, 1) at ~350ms * * Zero-animation rule: NEVER add transitions or animations to interactions * that fire ≥100×/day (keyboard navigation, bulk list actions, sidebar toggle * on < 1000ms intervals). Motion is a reward for infrequent, meaningful actions. * * prefers-reduced-motion must collapse all durations to 0.01ms: * @media (prefers-reduced-motion: reduce) { * *, *::before, *::after { * animation-duration: 0.01ms !important; * transition-duration: 0.01ms !important; * } * } */ }