/* * ============================================================================= * DESIGN SYSTEM TOKENS — Single source of truth * ============================================================================= * * Before adding a literal (hex, rgba, px, ms, cubic-bezier, gradient) in any * consuming CSS file, SEARCH THIS FILE for an existing scale that covers it. * * Before adding a new token here, SEARCH THIS FILE for an existing match. * Duplicate tokens are bugs — they produce silent drift. * * Adding a new scale (e.g. `--space-*`, `--text-*`)? Migrate all existing * consumers in the same commit. A token with no call sites is speculative. * * `bun run lint:tokens` enforces the high-traffic drift categories (hex * duplication, ink-alpha, white-highlight, action-primary alpha, font-weight, * border-radius literals). See `scripts/colorTokenGuardrails.ts`. * * Shared keyframes live in `./motion.css` (auto-imported below). Quick * discovery: * - Colour / shadow / focus-ring drift → `bun run lint:tokens` * - Full token catalogue → `./README.md` + `./tokens.json` (generated) * * Read `design-system/AGENTS.md` ("Token discipline") for the full contract. * ============================================================================= */ :root { /* ============================================ SHADCN-COMPATIBILITY ALIASES ============================================ These aliases let shadcn-style primitives (Button, Badge, Callout, Tabs, Input, Toast, Table) keep using `bg-primary`, `text-foreground`, etc. without a parallel HSL variable layer. Every alias resolves directly to a canonical `--color-*` token defined below — there is no independent value that can drift. Rule: primitives imported by `@/components/ui/*` may use these aliases. Raw CSS should prefer the canonical `--color-*` tokens for clarity. */ --color-background: var(--color-bg-primary); --color-foreground: var(--color-fg-primary); --color-card: var(--color-bg-primary); --color-card-foreground: var(--color-fg-primary); --color-popover: var(--color-bg-primary); --color-popover-foreground: var(--color-fg-primary); --color-primary: var(--color-accent-blue); --color-primary-foreground: var(--color-action-primary-inverse); --color-secondary: var(--color-bg-secondary); --color-secondary-foreground: var(--color-fg-secondary); --color-muted: var(--color-bg-secondary); --color-muted-foreground: var(--color-fg-secondary); --color-accent: var(--color-accent-cyan); --color-accent-foreground: var(--color-action-primary-inverse); --color-destructive: var(--color-accent-red); --color-destructive-foreground: var(--color-action-primary-inverse); --color-input: var(--color-input-border); --color-ring: var(--color-focus-ring); --color-success: var(--color-accent-green); --color-success-foreground: var(--color-action-primary-inverse); --color-warning-foreground: var(--color-action-primary-inverse); --color-error: var(--color-accent-red); --color-error-foreground: var(--color-action-primary-inverse); --color-info-foreground: var(--color-action-primary-inverse); /* ============================================ COLOR SYSTEM - LIGHT MODE (Warm Editorial) ============================================ */ /* Background colors */ --color-bg-primary: #fffaf5; --color-bg-secondary: #f5efe7; --color-bg-tertiary: #ebe6e1; --color-bg-disabled: #e5eaea; /* Foreground colors */ --color-fg-primary: #000000; --color-fg-secondary: #262626; --color-fg-tertiary: #404040; --color-fg-disabled: #a8a29e; /* Primary accent: Blue */ --color-accent-primary: #2c75c3; --color-accent-blue: #2c75c3; --color-accent-blue-hover: #1a5fa8; --color-accent-blue-active: #0d4a8d; --color-accent-blue-10: color-mix(in srgb, var(--color-accent-blue) 10%, transparent); --color-accent-blue-20: color-mix(in srgb, var(--color-accent-blue) 20%, transparent); /* Secondary accent: Cyan */ --color-accent-cyan: #0d98ba; --color-accent-cyan-hover: #0a7a95; --color-accent-cyan-active: #086278; --color-accent-cyan-disabled: #a8d4de; --color-accent-cyan-text: #0a7a95; --color-accent-cyan-10: rgba(13, 152, 186, 0.1); --color-accent-cyan-20: rgba(13, 152, 186, 0.2); /* Semantic: Red (Error/Destructive) */ --color-accent-red: #c2182b; --color-accent-red-hover: #a01523; --color-accent-red-active: #7e101b; --color-accent-red-disabled: #e8b0b6; --color-accent-red-text: #a01523; --color-accent-red-10: rgba(194, 24, 43, 0.1); /* Semantic: Green (Success) */ --color-accent-green: #337b35; --color-accent-green-hover: #2a6429; --color-accent-green-active: #224f21; --color-accent-green-text: #2a6429; --color-accent-green-10: rgba(51, 123, 53, 0.1); /* Functional accents (avoid color-named tokens for semantic roles) */ --color-label-accent: #8b6914; --color-badge-attention-bg: rgba(200, 137, 26, 0.2); --color-badge-attention-text: #8b6914; /* Semantic: Warning/Info */ --color-warning: #d97706; --color-warning-10: rgba(217, 119, 6, 0.1); --color-info: #0d98ba; --color-info-10: rgba(13, 152, 186, 0.1); /* `--color-error` and `--color-error-foreground` are shadcn-compat aliases (defined at the top of @theme). The -10 variant lives only here. */ --color-error-10: var(--color-accent-red-10); /* Borders */ --color-border: #d8cfc2; --color-border-hover: #c8bfb2; /* Tag/Badge palette */ --color-tag-blue: #2c75c3; --color-tag-blue-bg: rgba(44, 117, 195, 0.12); --color-tag-red: #c2182b; --color-tag-red-bg: rgba(194, 24, 43, 0.12); --color-tag-green: #337b35; --color-tag-green-bg: rgba(51, 123, 53, 0.12); --color-tag-amber: #d97706; --color-tag-amber-bg: rgba(217, 119, 6, 0.12); --color-tag-teal: #0f766e; --color-tag-teal-bg: rgba(15, 118, 110, 0.12); /* Dynamic palette (for event types, tags) */ --color-palette-blue: #2c75c3; --color-palette-cyan: #0d98ba; --color-palette-red: #c2182b; --color-palette-green: #337b35; --color-palette-amber: #d97706; --color-palette-teal: #0f766e; --color-palette-orange: #f97316; --color-palette-rose: #f43f5e; --color-palette-pink: #ec4899; --color-palette-sky: #0ea5e9; --color-palette-lime: #84cc16; --color-palette-violet: #8b5cf6; --color-palette-indigo: #6366f1; --color-palette-emerald: #10b981; --color-palette-fuchsia: #d946ef; /* Input states */ --color-input-bg: #ffffff; --color-input-border: #d8cfc2; --color-input-border-hover: #c8bfb2; --color-input-border-focus: #0d98ba; --color-input-border-error: #c2182b; /* Focus */ --color-focus-ring: #0d98ba; /* Scrollbar */ --color-scrollbar-thumb: #2c75c3; --color-scrollbar-thumb-hover: #1a5fa8; --color-scrollbar-track: var(--color-bg-tertiary); /* ============================================ TYPOGRAPHY ============================================ */ --font-family-mono: 'Geist Mono', monospace; --font-mono: 'Geist Mono', monospace; --font-sans: 'Chivo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-serif: 'Chivo', Georgia, 'Times New Roman', serif; --font-logo: 'Chivo', Georgia, serif; /* ============================================ HERO TOKENS ============================================ */ --color-hero-bg: #1f1814; --color-hero-bg-hover: #0f0a08; --color-action-primary: #b2491f; --color-action-primary-hover: #993006; --color-action-primary-active: #7f1600; --color-action-primary-inverse: #ffffff; --color-action-primary-10: rgba(178, 73, 31, 0.1); --color-link-primary: var(--color-action-primary); --color-link-primary-hover: var(--color-action-primary-hover); --color-control-accent: var(--color-accent-cyan); --color-control-accent-hover: var(--color-accent-cyan-hover); --color-control-accent-20: var(--color-accent-cyan-20); /* ============================================ SHADOWS (Soft Editorial) ============================================ */ --shadow-soft-sm: 0 2px 6px rgba(43, 42, 40, 0.08); --shadow-soft-md: 0 8px 20px rgba(43, 42, 40, 0.1); --shadow-soft-lg: 0 12px 28px rgba(43, 42, 40, 0.12); --shadow-soft-inset: inset 0 2px 4px rgba(43, 42, 40, 0.06); /* ============================================ DEPTH SYSTEM (Multi-Layer Shadows) ============================================ */ /* Individual shadow layers */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1); --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.1); --shadow-2xl: 0 32px 64px rgba(0, 0, 0, 0.12); /* Inner highlights/shadows */ --highlight-top: inset 0 1px 0 rgba(255, 255, 255, 0.25); --highlight-top-strong: inset 0 1px 0 rgba(255, 255, 255, 0.5); --inset-sm: inset 0 1px 2px rgba(0, 0, 0, 0.08); --inset-md: inset 0 2px 4px rgba(0, 0, 0, 0.1); /* Composite shadows for buttons */ --btn-shadow-rest: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 1px rgba(0, 0, 0, 0.06); --btn-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.4); --btn-shadow-active: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(0, 0, 0, 0.10), inset 0 2px 4px rgba(0, 0, 0, 0.06); /* Input shadows (recessed) */ --input-shadow: var(--skeuo-field-well); /* Card shadows - hover uses softer, more diffuse shadows to avoid clipping */ --card-shadow-rest: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.08); --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08), 0 12px 48px rgba(0, 0, 0, 0.06); /* Modal shadows */ --modal-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 16px rgba(0, 0, 0, 0.06), 0 24px 48px rgba(0, 0, 0, 0.08), 0 48px 96px rgba(0, 0, 0, 0.06); /* Hairline inset rings — 4-step scale matching `--color-ink-a*`. */ --ring-inset-subtle: inset 0 0 0 1px var(--color-ink-a08); --ring-inset-standard: inset 0 0 0 1px var(--color-ink-a12); --ring-inset-medium: inset 0 0 0 1px var(--color-ink-a16); --ring-inset-strong: inset 0 0 0 1px var(--color-ink-a24); /* Brand (action-primary orange) focus rings — for `box-shadow` focus states on filled controls (city picker button, onboarding fields). */ --focus-ring-sm: 0 0 0 2px var(--color-action-primary-15); --focus-ring-md: 0 0 0 3px var(--color-action-primary-15); --focus-ring-lg: 0 0 0 1px var(--color-action-primary-30), 0 0 0 3px var(--color-action-primary-15); /* Focus outline — use `outline: var(--focus-outline);` + `outline-offset: var(--focus-outline-offset);` for `:focus-visible`. */ --focus-outline-width: 2px; --focus-outline-color: var(--color-focus-ring); --focus-outline-offset: 2px; --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); /* Warm-editorial flat drops (collapses several 0 1–3 px / 0.08–0.16 α shadows) */ --shadow-flat-xs: 0 1px 2px var(--color-ink-a08); --shadow-flat-sm: 0 1px 3px var(--color-ink-a12); --shadow-elevated-sm: 0 2px 6px var(--color-ink-a12); --shadow-elevated-md: 0 4px 12px var(--color-ink-a16); /* Lightbox depth (single strong diffuse) */ --shadow-lightbox: 0 24px 64px rgba(0, 0, 0, 0.4); /* Skeuomorphic materiality tokens — print-shop editorial */ --skeuo-frame-inner: inset 0 1px 2px rgba(31, 24, 20, 0.06); --skeuo-frame-inner-hover: inset 0 2px 4px rgba(31, 24, 20, 0.10); --skeuo-text-emboss: 0 1px 0 rgba(255, 255, 255, 0.5); --skeuo-convex-surface: linear-gradient(to bottom, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 40%, rgba(31, 24, 20, 0.03) 100%); --skeuo-modal-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.4); /* Paper edge light for floating panels — overhead light catches the top edge of a card lifted off the desk */ --skeuo-panel-rim: inset 0 1px 0 rgba(255, 255, 255, 0.3); /* Recessed input well — letterpress impression for input fields */ --skeuo-field-well: inset 0 2px 4px rgba(31, 24, 20, 0.06), inset 0 -1px 0 rgba(255, 255, 255, 0.6); --skeuo-field-well-focus: inset 0 2px 4px rgba(31, 24, 20, 0.10), inset 0 -1px 0 rgba(255, 255, 255, 0.4); /* Dome highlight for CTA buttons — light catching the top of a raised surface */ --skeuo-dome-highlight: radial-gradient(90% 6% at 50% 8%, rgba(255, 255, 255, 0.25) 0%, transparent 45%); /* Modal/Overlay */ --color-modal-backdrop: rgba(255, 248, 240, 0.6); --modal-backdrop-blur: 8px; /* ============================================ GRADIENTS (named, reusable across components) ============================================ */ /* Action-primary (orange CTA) dome — vertical for landing / event page. */ --gradient-action-primary-vertical: linear-gradient(180deg, var(--color-action-primary) 0%, var(--color-action-primary-hover) 100%); /* Action-primary dome — 135° angle used in buttons (site-header, skeuo-btn). */ --gradient-action-primary-rest: linear-gradient(135deg, var(--color-action-primary) 0%, var(--color-action-primary-hover) 100%); --gradient-action-primary-hover: linear-gradient(135deg, hsl(16, 76%, 47%) 0%, hsl(16, 76%, 37%) 100%); /* Paper / glass surface gradients for floating cards. */ --gradient-surface-card: linear-gradient(to bottom, #ffffff 0%, #f7f2ed 100%); --gradient-surface-glass-top: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 50%); /* Loading shimmer sweeps. */ --gradient-shimmer-light: linear-gradient(90deg, transparent 0%, var(--color-highlight-15) 50%, transparent 100%); --gradient-shimmer-dark: linear-gradient(110deg, rgba(43, 42, 40, 0.03) 8%, rgba(43, 42, 40, 0.08) 18%, rgba(43, 42, 40, 0.03) 33%); /* ============================================ TRANSITIONS ============================================ */ --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1); --ease-in-out-smooth: cubic-bezier(0.455, 0.03, 0.515, 0.955); --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1); /* Durations on a 50ms grid. Snap ad-hoc ms values to the nearest step. */ --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 200ms; --duration-snappy: 250ms; --duration-slow: 300ms; --duration-pulse: 1.5s; /* Composite transitions */ --transition-fast: 150ms ease; --transition-normal: 200ms ease; --transition-slow: 300ms var(--ease-smooth); --transition-bounce: 200ms cubic-bezier(0.34, 1.56, 0.64, 1); --transition-spring: 220ms var(--ease-spring); /* ============================================ Z-INDEX SCALE ============================================ */ --z-dropdown: 50; --z-sticky: 100; --z-modal: 9000; --z-modal-nested: 9100; /* For dialogs that appear on top of modals (e.g., ConfirmDialog) */ --z-lightbox: 9500; /* Above modals, below toasts so toasts can interrupt a lightbox */ --z-toast: 9999; /* ============================================ SPACING SCALE (rem-based, base=16px) Tokenise repeated padding/margin/gap values so the rhythm of the UI can be tuned from one place. Use px literals only for pixel-perfect alignment (e.g. 1px borders) or where the value encodes physical geometry (touch targets, icon sizes) already covered by dedicated tokens below. ============================================ */ --space-3xs: 0.125rem; /* 2px */ --space-2xs: 0.25rem; /* 4px */ --space-xs: 0.375rem; /* 6px */ --space-sm: 0.5rem; /* 8px */ --space-sm-plus: 0.625rem; /* 10px — phase-out, snap to sm or md */ --space-md: 0.75rem; /* 12px */ --space-md-plus: 0.875rem; /* 14px — phase-out, snap to md or lg */ --space-lg: 1rem; /* 16px */ --space-lg-plus: 1.25rem; /* 20px — phase-out, snap to lg or xl */ --space-xl: 1.5rem; /* 24px */ --space-2xl: 2rem; /* 32px */ --space-3xl: 3rem; /* 48px */ --space-4xl: 4rem; /* 64px */ /* ============================================ TYPOGRAPHY SCALE ============================================ */ --text-3xs: 0.5rem; /* 8px */ --text-2xs: 0.625rem; /* 10px */ --text-xs: 0.6875rem; /* 11px */ --text-sm: 0.75rem; /* 12px */ --text-md: 0.8125rem; /* 13px */ --text-base: 0.875rem; /* 14px */ --text-lg: 0.9375rem; /* 15px */ --text-xl: 1rem; /* 16px */ --text-2xl: 1.125rem; /* 18px */ --text-3xl: 1.25rem; /* 20px */ --text-4xl: 1.375rem; /* 22px */ --text-5xl: 1.5rem; /* 24px */ --text-6xl: 1.75rem; /* 28px */ --text-7xl: 2rem; /* 32px */ --text-8xl: 2.5rem; /* 40px */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Unitless so line-height scales with font-size. */ --line-height-none: 1; --line-height-tight: 1.15; --line-height-snug: 1.3; --line-height-normal: 1.4; --line-height-relaxed: 1.5; --line-height-loose: 1.7; --tracking-tight: 0.01em; /* logo wordmark, running body */ --tracking-snug: 0.02em; --tracking-wide: 0.03em; --tracking-wider: 0.04em; --tracking-wider-05: 0.05em; --tracking-widest: 0.06em; --tracking-caps-sm: 0.08em; --tracking-caps: 0.1em; --tracking-caps-lg: 0.12em; --tracking-caps-xl: 0.18em; /* ============================================ INK ALPHA SCALE (editorial warm-black overlays) Collapses ~60 hand-rolled rgba(31, 24, 20, α) and #1F1814XX hex alpha values drifting between 0.03 and 0.30 into a 7-step scale. Used for: shadows, hairline borders, overlay tints. ============================================ */ --color-ink-a03: rgba(31, 24, 20, 0.03); --color-ink-a05: rgba(31, 24, 20, 0.05); --color-ink-a08: rgba(31, 24, 20, 0.08); --color-ink-a12: rgba(31, 24, 20, 0.12); --color-ink-a16: rgba(31, 24, 20, 0.16); --color-ink-a24: rgba(31, 24, 20, 0.24); --color-ink-a30: rgba(31, 24, 20, 0.30); /* Warm-grey foreground ramp (editorial body text palette) */ --color-fg-placeholder: #b8ada3; --color-fg-muted: #857a70; --color-fg-body: #5a524a; /* White highlight alphas (skeuo glass / dome highlights). */ --color-highlight-15: rgba(255, 255, 255, 0.15); --color-highlight-20: rgba(255, 255, 255, 0.20); --color-highlight-28: rgba(255, 255, 255, 0.28); --color-highlight-30: rgba(255, 255, 255, 0.30); --color-highlight-40: rgba(255, 255, 255, 0.40); --color-highlight-50: rgba(255, 255, 255, 0.50); --color-highlight-60: rgba(255, 255, 255, 0.60); --color-highlight-70: rgba(255, 255, 255, 0.70); --color-highlight-72: rgba(255, 255, 255, 0.72); --color-highlight-90: rgba(255, 255, 255, 0.90); /* Neutral-black shadow alphas — paired with the shadow offset scale. Collapses hand-rolled `rgba(0, 0, 0, α)` box-shadow sites. Prefer `--color-ink-a*` for tints on warm surfaces; use this scale only for drop-shadows where a cool neutral reads as "depth" rather than "warm ink". */ --color-shadow-a05: rgba(0, 0, 0, 0.05); --color-shadow-a06: rgba(0, 0, 0, 0.06); --color-shadow-a08: rgba(0, 0, 0, 0.08); --color-shadow-a10: rgba(0, 0, 0, 0.10); --color-shadow-a12: rgba(0, 0, 0, 0.12); --color-shadow-a15: rgba(0, 0, 0, 0.15); --color-shadow-a18: rgba(0, 0, 0, 0.18); --color-shadow-a20: rgba(0, 0, 0, 0.20); --color-shadow-a25: rgba(0, 0, 0, 0.25); /* Scrim / backdrop overlays (darker than ink-alpha, used for lightboxes, crop modal, fullscreen expansions). */ --color-overlay-scrim-40: rgba(0, 0, 0, 0.40); --color-overlay-scrim-50: rgba(0, 0, 0, 0.50); --color-overlay-scrim-80: rgba(0, 0, 0, 0.80); --color-overlay-scrim-85: rgba(31, 24, 20, 0.85); /* warm lightbox tint */ --color-overlay-paper-92: rgba(255, 250, 245, 0.92); /* warm expansion backdrop */ /* Action-primary (orange CTA) alpha ramp — pairs with `--color-action-primary-10` defined in the hero block above. */ --color-action-primary-04: rgba(178, 73, 31, 0.04); --color-action-primary-06: rgba(178, 73, 31, 0.06); --color-action-primary-08: rgba(178, 73, 31, 0.08); --color-action-primary-15: rgba(178, 73, 31, 0.15); --color-action-primary-20: rgba(178, 73, 31, 0.20); --color-action-primary-25: rgba(178, 73, 31, 0.25); --color-action-primary-30: rgba(178, 73, 31, 0.30); /* ============================================ COMPONENT TOKENS ============================================ */ --aspect-poster: 2 / 3; --radius-xs: 4px; --radius-sm: 6px; --radius-sm-plus: 8px; /* paper/doc surfaces, onboarding frames */ --radius-md: 10px; --radius-default: 10px; --radius-md-plus: 12px; /* inline panels (inline-media, review boxes) */ --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px; --radius-circle: 50%; --masonry-gap: 12px; --masonry-row-height: 8px; --masonry-column-min: 220px; --masonry-column-max: 320px; /* Control heights (button / input / chip) — rationalises 24/28/32/36/44 scale */ --control-height-xs: 1.5rem; /* 24px — badge, mini chip */ --control-height-sm: 1.75rem; /* 28px — small chip */ --control-height-md: 2rem; /* 32px — filter chip, small button */ --control-height-lg: 2.25rem; /* 36px — default button, input */ --control-height-xl: 2.75rem; /* 44px — primary CTA, a11y touch target */ --touch-target-min: 2.75rem; /* 44px — WCAG AAA minimum */ /* Icon glyph sizes */ --icon-size-sm: 0.875rem; /* 14px */ --icon-size-md: 1rem; /* 16px */ --icon-size-lg: 1.25rem; /* 20px */ /* Layout constants */ --layout-container-max: 80rem; --layout-container-narrow: 64rem; --layout-container-pad: clamp(1rem, 4vw, 3rem); --layout-header-height: 4rem; /* Modal / popover widths */ --modal-width-sm: 420px; --modal-width-md: 640px; --popover-width-sm: 280px; --popover-width-md: 400px; --hero-min-height-desktop: 36vh; --hero-min-height-mobile: 36vh; --hero-padding: clamp(32px, 4vw, 56px); --hero-content-max-width: 820px; --hero-search-height: 44px; } /* Shared keyframes live in `./motion.css` (imported at the top of this file). Component-local keyframes stay next to their consumer. */