/* Convo brand CDN · brand.css · v1 · 0161dd2
 * Linked, not copied: values update with the brand. brand@convorelay.com */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
@font-face {
  font-family: 'GT Walsheim';
  src: url('https://brand.convo.io/cdn/v1/fonts/GT-Walsheim-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Walsheim';
  src: url('https://brand.convo.io/cdn/v1/fonts/GT-Walsheim-Regular-Oblique.woff2') format('woff2');
  font-weight: 400;
  font-style: oblique;
  font-display: swap;
}
@font-face {
  font-family: 'GT Walsheim';
  src: url('https://brand.convo.io/cdn/v1/fonts/GT-Walsheim-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Walsheim';
  src: url('https://brand.convo.io/cdn/v1/fonts/GT-Walsheim-Medium-Oblique.woff2') format('woff2');
  font-weight: 500;
  font-style: oblique;
  font-display: swap;
}


:root {
  --border-thickness-thin: 1px; /* Thin border — 1px. Default borders, dividers, subtle separators. */
  --border-thickness-medium: 2px; /* Medium border — 2px. Emphasised states; focus rings, selected indicators. */
  --border-width-1: 1px;
  --border-width-2: 2px;
  --breakpoint-sm: 640px; /* Phones in landscape, small tablets in portrait. */
  --breakpoint-md: 768px; /* Tablets, narrow laptops. */
  --breakpoint-lg: 1024px; /* Standard laptops, smaller desktops. */
  --breakpoint-xl: 1280px; /* Wider desktops, marketing hero spreads. */
  --color-signal-evergreen: #00aa55; /* Hero brand colour. Always present in branded materials. Canonical at evergreen.500. */
  --color-base-white: #fffbf9; /* Primary background. Deliberate warm near-white. */
  --color-base-black: #181b1a; /* Primary text colour. Deliberate near-black with subtle green tint; sits adjacent to but not on the neutral ramp. */
  --color-evergreen-50: #f1f8f1;
  --color-evergreen-100: #e4ede1;
  --color-evergreen-200: #c5decc;
  --color-evergreen-300: #97c8ac;
  --color-evergreen-400: #4fb585;
  --color-evergreen-500: #00aa55;
  --color-evergreen-600: #009448;
  --color-evergreen-700: #1a7741;
  --color-evergreen-800: #1a5832;
  --color-evergreen-900: #113a25;
  --color-evergreen-950: #0a271a;
  --color-neutral-50: #fafaf8;
  --color-neutral-100: #f1f1ee;
  --color-neutral-200: #e1e1dd;
  --color-neutral-300: #c8c8c3;
  --color-neutral-400: #a8a8a2;
  --color-neutral-500: #888881;
  --color-neutral-600: #6b6b65;
  --color-neutral-700: #50504b;
  --color-neutral-800: #383834;
  --color-neutral-900: #242421;
  --color-neutral-950: #161613;
  --color-critical-50: #ffecef;
  --color-critical-100: #fee1e6;
  --color-critical-200: #fed1d7;
  --color-critical-300: #fdacb1;
  --color-critical-400: #f78086;
  --color-critical-500: #e22c38;
  --color-critical-600: #c70a24;
  --color-critical-700: #a30a24;
  --color-critical-800: #8e0b21;
  --color-critical-900: #5f0716;
  --color-critical-950: #2f040b;
  --color-warning-50: #fff1e3;
  --color-warning-100: #ffebd5;
  --color-warning-200: #ffddb6;
  --color-warning-300: #ffd6a4;
  --color-warning-400: #ffb800;
  --color-warning-500: #e5a500;
  --color-warning-600: #b28400;
  --color-warning-700: #956f00;
  --color-warning-800: #7c5800;
  --color-warning-900: #5e4200;
  --color-warning-950: #412d00;
  --color-caution-50: #fff4bf;
  --color-caution-100: #ffef9d;
  --color-caution-200: #ffeb78;
  --color-caution-300: #f7df00;
  --color-caution-400: #ead300;
  --color-caution-500: #e1cb00;
  --color-caution-600: #c5b200;
  --color-caution-700: #998a00;
  --color-caution-800: #827500;
  --color-caution-900: #4f4700;
  --color-caution-950: #332e00;
  --color-success-50: #f1f8f1;
  --color-success-100: #e4ede1;
  --color-success-200: #c5decc;
  --color-success-300: #97c8ac;
  --color-success-400: #4fb585;
  --color-success-500: #00aa55;
  --color-success-600: #009448;
  --color-success-700: #1a7741;
  --color-success-800: #1a5832;
  --color-success-900: #113a25;
  --color-success-950: #0a271a;
  --color-info-50: #eaf4ff;
  --color-info-100: #d5ebff;
  --color-info-200: #c0e1ff;
  --color-info-300: #91d0ff;
  --color-info-400: #51c0ff;
  --color-info-500: #0094d5;
  --color-info-600: #007cb4;
  --color-info-700: #00679b;
  --color-info-800: #005c8c;
  --color-info-900: #00527c;
  --color-info-950: #003a5a;
  --elevation-1: 0 1px 2px #181B1A0F, 0 1px 3px #181B1A0A; /* At-rest surfaces hinting they're separable (cards on a canvas). */
  --elevation-2: 0 2px 4px #181B1A0F, 0 4px 8px #181B1A0A; /* Hovered cards, low-priority dropdowns. */
  --elevation-3: 0 4px 8px #181B1A14, 0 8px 16px #181B1A0F; /* Floating menus, popovers, sticky headers crossing scrolled content. */
  --elevation-4: 0 8px 16px #181B1A1A, 0 16px 32px #181B1A14; /* Modals, dialogs, full-attention overlays. */
  --motion-duration-quick: 200ms; /* Motion (8 Oct 2026). Controls, menus, small popovers, hover and press. Most interface motion. */
  --motion-duration-quick-exit: 140ms; /* Motion (8 Oct 2026). Leaving after a Quick entrance: about 70% of it, on the same ease-out. */
  --motion-duration-large: 360ms; /* Motion (8 Oct 2026). Dialogs, sheets, drawers, toasts and disclosure panels. */
  --motion-duration-large-exit: 240ms; /* Motion (8 Oct 2026). Leaving after a Large entrance: about 70% of it, on the same ease-out. */
  --motion-duration-text: 400ms; /* Motion (8 Oct 2026). Text in motion: a label or number morphing to its next value. */
  --motion-duration-fade: 140ms; /* Motion (8 Oct 2026). Opacity and colour changes. Stays when motion is reduced: movement stops, the fade remains, so a change can still be followed. */
  --motion-duration-brand: 700ms; /* Motion (8 Oct 2026). Brand moments on marketing and brand surfaces: a hero or campaign intro, arriving as a wave, once per visit. Never in interfaces. */
  --motion-easing-out: cubic-bezier(0.16, 1, 0.3, 1); /* Motion (8 Oct 2026). Strong ease-out for Quick motion, entering and leaving. Starts fast, so the response feels immediate, then settles. */
  --motion-easing-out-large: cubic-bezier(0.22, 1, 0.36, 1); /* Motion (8 Oct 2026). Strong ease-out for Large surfaces, entering and leaving. */
  --motion-easing-move: cubic-bezier(0.77, 0, 0.175, 1); /* Motion (8 Oct 2026). Ease-in-out, only for something already on screen moving to a new place. */
  --motion-easing-text: cubic-bezier(0.19, 1, 0.22, 1); /* Motion (8 Oct 2026). Text in motion. Kept letters glide, new ones grow in. */
  --motion-scale-enter: 0.96; /* Motion (8 Oct 2026). Popups and surfaces grow in from this scale with a fade, and shrink back to it on the way out. Never from 0. */
  --motion-scale-text: 0.8; /* Motion (8 Oct 2026). Letters arriving in a text morph grow in from this scale; leaving letters shrink to it. */
  --motion-press-distance: 1px; /* Motion (8 Oct 2026). A press sinks the control this far. */
  --motion-stagger: 40ms; /* Motion (8 Oct 2026). Delay between items arriving as a group. Keep the whole group under 300ms; never block input. */
  --motion-stagger-brand: 80ms; /* Motion (8 Oct 2026). Delay between parts of a brand moment arriving as a wave. */
  --motion-blur-bridge: 2px; /* Motion (8 Oct 2026). A blur that bridges two states during a crossfade, only while moving. Never on a surface at rest. */
  --motion-duration-100: var(--motion-duration-quick-exit); /* Deprecated 8 Oct 2026: use motion-duration-quick-exit. Kept as an alias so existing surfaces follow the new language. */
  --motion-duration-200: var(--motion-duration-quick); /* Deprecated 8 Oct 2026: use motion-duration-quick. Kept as an alias so existing surfaces follow the new language. */
  --motion-duration-300: var(--motion-duration-large); /* Deprecated 8 Oct 2026: use motion-duration-large. Kept as an alias so existing surfaces follow the new language. */
  --motion-duration-500: var(--motion-duration-large); /* Deprecated 8 Oct 2026: use motion-duration-large. Kept as an alias so existing surfaces follow the new language. */
  --motion-duration-fast: var(--motion-duration-quick-exit); /* Deprecated 8 Oct 2026: use motion-duration-quick-exit. Kept as an alias so existing surfaces follow the new language. */
  --motion-duration-prompt: var(--motion-duration-quick); /* Deprecated 8 Oct 2026: use motion-duration-quick. Kept as an alias so existing surfaces follow the new language. */
  --motion-duration-deliberate: var(--motion-duration-large); /* Deprecated 8 Oct 2026: use motion-duration-large. Kept as an alias so existing surfaces follow the new language. */
  --motion-duration-expansive: var(--motion-duration-large); /* Deprecated 8 Oct 2026: use motion-duration-large. Kept as an alias so existing surfaces follow the new language. */
  --motion-easing-standard: var(--motion-easing-out); /* Deprecated 8 Oct 2026: use motion-easing-out. Kept as an alias so existing surfaces follow the new language. */
  --motion-easing-enter: var(--motion-easing-out); /* Deprecated 8 Oct 2026: use motion-easing-out. Kept as an alias so existing surfaces follow the new language. */
  --motion-easing-exit: var(--motion-easing-out); /* Deprecated 8 Oct 2026: use motion-easing-out. Kept as an alias so existing surfaces follow the new language. */
  --opacity-muted: 0.4; /* Whole-element dimming. Disabled or inactive elements: the entire card/button/list-item dims together (background, border, and text). */
  --opacity-scrim: 0.6; /* Modal, drawer, and sheet backdrops. Background visible enough for context; dim enough to focus on the foreground. */
  --opacity-subtle: 0.7; /* De-emphasised or watermark content: placeholder previews, ghosted empty-state visuals, dormant hover affordances. */
  --radius-0: 0px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-none: 0px; /* No radius — 0px. Square corners. Semantic alias of radius.0. See ADR 0018. */
  --radius-snug: 4px; /* Snug radius — 4px. Subtle softening; inputs, small chips. */
  --radius-soft: 8px; /* Soft radius — 8px. Default radius for cards, buttons, banners. */
  --radius-generous: 12px; /* Generous radius — 12px. Larger cards, modals. */
  --radius-lush: 16px; /* Lush radius — 16px. Heroes, large-format cards. */
  --radius-pill: 9999px; /* Pill / circle — 9999px. Avatars, status badges, pill buttons. */
  --radius-full: 9999px;
  --radius-6: 6px;
  --radius-24: 24px;
  --radius-36: 36px;
  --space-none: 0px; /* No spacing. Strip margin/padding entirely. */
  --space-hair: 4px; /* Hairline spacing — 4px. Tightest pairing; icon to label, dense vertical rhythm. */
  --space-tight: 8px; /* Tight spacing — 8px. Compact internal padding, list-item gaps. */
  --space-snug: 12px; /* Snug spacing — 12px. Default button padding, comfortable inline gaps. */
  --space-medium: 16px; /* Medium spacing — 16px. Body padding, default card padding, paragraph gaps. */
  --space-cosy: 20px; /* Cosy spacing — 20px. Generous padding for cards, panels. */
  --space-comfortable: 24px; /* Comfortable spacing — 24px. Section padding, default modal padding. */
  --space-roomy: 32px; /* Roomy spacing — 32px. Spacious section padding, large modal padding. */
  --space-spacious: 40px; /* Spacious spacing — 40px. Generous between-section gaps. */
  --space-lavish: 48px; /* Lavish spacing — 48px. Marketing-scale between-section gaps. */
  --space-vast: 64px; /* Vast spacing — 64px. Hero-scale between-section gaps. */
  --spacing-0: 0px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --font-family-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-family-display: 'GT Walsheim', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Loaded only on marketing and brand surfaces. On interface surfaces GT Walsheim is absent and the ladder lands on Inter automatically — no conditional code, just font-family fallbacks doing what they're designed to. */
  --font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-32: 32px;
  --font-size-36: 36px;
  --font-size-40: 40px;
  --font-size-44: 44px;
  --font-size-52: 52px;
  --font-size-96: 96px;
  --line-height-16: 16px;
  --line-height-20: 20px;
  --line-height-24: 24px;
  --line-height-28: 28px;
  --line-height-32: 32px;
  --line-height-40: 40px;
  --line-height-44: 44px;
  --line-height-52: 52px;
  --line-height-64: 64px;
  --line-height-112: 112px;
  --letter-spacing-normal: 0px;
  --letter-spacing-tight: -0.2px;
  --letter-spacing-tighter: -0.5px;
  --letter-spacing-tightest: -1.5px;
  --z-index-dropdown: 10; /* Menus, selects, autocomplete dropdowns. */
  --z-index-sticky: 20; /* Sticky headers, sticky tab bars, sticky footers. */
  --z-index-popover: 30; /* Popovers, tooltips, hover cards within ordinary content. */
  --z-index-modal: 40; /* Modal dialogs, drawers, sheets. */
  --z-index-toast: 50; /* Toasts, banners, transient top-level notifications. */
  --surface-canvas: var(--color-base-white); /* Page background. */
  --surface-raised: var(--color-base-white); /* Cards, list items, raised surfaces. */
  --surface-overlay: var(--color-base-white); /* Modals, popovers, dropdowns. */
  --text-primary: var(--color-base-black); /* Primary body and heading text. */
  --text-secondary: var(--color-neutral-700); /* Secondary text — captions, supporting copy. */
  --text-subtle: var(--color-neutral-600); /* Subtle text — placeholders, hints. Brand: neutral.600 in light so small text passes AA (5.21:1 on White). */
  --text-disabled: var(--color-neutral-400); /* Disabled state text. */
  --border-default: var(--color-neutral-200); /* Default borders, dividers. */
  --border-subtle: var(--color-neutral-100); /* Subtle separators within a surface. */
  --border-strong: var(--color-neutral-500); /* Strong borders — emphasised inputs, focus states. Brand: neutral.500 in light (3.47:1, passes 3:1 for UI boundaries). */
  --status-critical-fg: var(--color-critical-600); /* Critical foreground — inline text, icons, default border for destructive/error states. Brand: critical.600 so text passes WCAG AA (4.5:1) on White and on its soft background; the bright 500 stays for backgrounds. */
  --status-critical-bg-strong: var(--color-critical-600); /* Critical saturated background — destructive button, hard-error banner. Pair with onStrong. Brand: critical.600 so its White label passes AA (5.84:1). */
  --status-critical-bg-soft: var(--color-critical-100); /* Critical soft tinted surface — subtle badge, inline highlight, soft banner. */
  --status-critical-on-strong: var(--color-base-white); /* Foreground colour on bgStrong. Constant across modes — dark text is the WCAG-safe pair on critical.500. Brand: White on critical.600 (5.84:1), both modes. */
  --status-warning-fg: var(--color-warning-800); /* Warning foreground — inline text, icons, default border for blocking-attention states. Brand: warning.800 so text passes WCAG AA (4.5:1) on White and on its soft background; the bright 500 stays for backgrounds. */
  --status-warning-bg-strong: var(--color-warning-500); /* Warning saturated background — banner emphasis, attention-grabbing chip. Pair with onStrong. */
  --status-warning-bg-soft: var(--color-warning-100); /* Warning soft tinted surface — subtle banner, mute-state self-view tint. */
  --status-warning-on-strong: var(--color-base-black); /* Foreground colour on bgStrong. Constant across modes — dark text is the WCAG-safe pair on warning.500. */
  --status-caution-fg: var(--color-caution-900); /* Caution foreground — inline text, icons, default border for soft-attention states (in-flux, reconnecting). Brand: caution.900 so text passes WCAG AA (4.5:1) on White and on its soft background; the bright 500 stays for backgrounds. */
  --status-caution-bg-strong: var(--color-caution-500); /* Caution saturated background — soft-attention banner, reconnecting state chip. Pair with onStrong. */
  --status-caution-bg-soft: var(--color-caution-100); /* Caution soft tinted surface — subtle in-flux banner, attempting-to-reconnect tint. Brand: caution.900 in dark so the 300 foreground passes AA on it. */
  --status-caution-on-strong: var(--color-base-black); /* Foreground colour on bgStrong. Constant across modes — dark text is the WCAG-safe pair on caution.500. */
  --status-success-fg: var(--color-success-700); /* Success foreground — inline text, icons, default border for confirmation/completion states. Brand: success.700 so text passes WCAG AA (4.5:1) on White and on its soft background; the bright 500 stays for backgrounds. */
  --status-success-bg-strong: var(--color-success-500); /* Success saturated background — completion banner, confirmation chip. Pair with onStrong. */
  --status-success-bg-soft: var(--color-success-100); /* Success soft tinted surface — subtle confirmation banner, completed-step tint. Brand: success.900 in dark so the 300 foreground passes AA on it. */
  --status-success-on-strong: var(--color-base-black); /* Foreground colour on bgStrong. Constant across modes — dark text is the WCAG-safe pair on success.500. */
  --status-info-fg: var(--color-info-700); /* Info foreground — inline text, links, icons, default border for informational states. Brand: info.700 so text passes WCAG AA (4.5:1) on White and on its soft background; the bright 500 stays for backgrounds. */
  --status-info-bg-strong: var(--color-info-500); /* Info saturated background — informational banner emphasis, neutral chip. Pair with onStrong. */
  --status-info-bg-soft: var(--color-info-100); /* Info soft tinted surface — subtle informational banner, link-hover tint. Brand: info.900 in dark so the 300 foreground passes AA on it. */
  --status-info-on-strong: var(--color-base-black); /* Foreground colour on bgStrong. Constant across modes — dark text is the WCAG-safe pair on info.500. */
  --status-neutral-fg: var(--color-neutral-700); /* Neutral foreground — text/icon on quiet tag-style badges where no status semantic applies. Lifts in dark mode for contrast. */
  --status-neutral-bg-strong: var(--color-neutral-700); /* Neutral saturated background — emphasis tag (Beta, New, AI). Pair with onStrong. Inverts across modes (neutral.700 light, neutral.200 dark) unlike the five saturated status families. */
  --status-neutral-bg-soft: var(--color-neutral-100); /* Neutral soft tinted surface — quiet tag, badge background, chip-style affordance. */
  --status-neutral-on-strong: var(--color-base-white); /* Foreground colour on neutral bgStrong. Unlike the five saturated status families where onStrong is mode-constant, neutral's onStrong inverts (base.white light, base.black dark) because bgStrong itself flips between a dark and pale neutral. */
  --action-primary-fg: var(--color-base-white); /* Label on the primary action: White, in both modes. */
  --action-primary-bg: var(--color-evergreen-700); /* Primary action background. Pine (evergreen.700): White labels pass AA (5.43:1). Evergreen stays the brand signal for large moments, not small controls. */
  --action-primary-hover: var(--color-evergreen-800); /* Primary action hover. Evergreen 800 (8.21:1 with White). */
  --action-primary-pressed: var(--color-evergreen-900); /* Primary action pressed. Forest (12.3:1 with White). */
  --action-primary-bg-soft: var(--color-evergreen-100); /* Primary action soft tint — ghost-button hover surface, low-emphasis primary affordance. Reads as a quiet brand-tinted wash, not a CTA. */
  --action-secondary-fg: var(--color-base-black); /* Foreground on secondary action surface — text/icon on quiet-neutral buttons. Inverts across modes. */
  --action-secondary-bg: var(--color-neutral-100); /* Secondary action background — quiet neutral surface. Cancel, dismiss, tertiary navigation; sits beside a primary action without competing. */
  --action-secondary-hover: var(--color-neutral-200); /* Secondary action hover state. Darker in light mode. */
  --action-secondary-pressed: var(--color-neutral-300); /* Secondary action pressed state. Darker still in light; lighter still in dark. */
  --action-secondary-bg-soft: var(--color-neutral-200); /* Secondary action soft tint — ghost-button hover surface on secondary affordances. Slightly louder than the resting bg so the hover registers. */
  --action-destructive-fg: var(--color-base-white); /* Foreground on destructive action surface — irreversible action buttons. */
  --action-destructive-bg: var(--color-critical-600); /* Destructive action background — delete, remove, irreversible actions. Critical 600 so White labels pass AA (5.84:1). */
  --action-destructive-hover: var(--color-critical-700); /* Destructive action hover (7.78:1 with White). */
  --action-destructive-pressed: var(--color-critical-800); /* Destructive action pressed. */
  --action-destructive-bg-soft: var(--color-critical-100); /* Destructive action soft tint — ghost-button hover surface for destructive affordances. Carries the red signal at low intensity. */
  --focus-ring-color: var(--color-evergreen-700); /* Focus ring colour. Brand-aligned; lifts to evergreen.400 in dark mode for contrast against the darker canvas. Brand: Pine (evergreen.700) in light, 5.43:1 on White; evergreen.400 in dark. */
  --input-bg: var(--color-base-white); /* Input field background. Matches surface.canvas in light mode; slightly lifted in dark to distinguish input chrome from page background. */
  --input-border: var(--color-neutral-500); /* Input field border. Currently same as border.default; explicit alias so form components can diverge later if needed. Brand: neutral.500 so the field edge passes 3:1 against its background in both modes. */
  --input-placeholder: var(--color-neutral-600); /* Input placeholder text. Currently same as text.subtle; explicit alias for form components. Brand: neutral.600 in light (5.21:1). */
  --brand-color-sapling: var(--color-evergreen-100); /* Light, fresh, tinted background. Formerly Honeydew (renamed for thematic alignment with the Evergreen / perpetual-growth theme). */
  --brand-color-sage: var(--color-evergreen-300); /* Soft mid-light evergreen. Accent backgrounds, decorative tints. */
  --brand-color-pine: var(--color-evergreen-700); /* Rich green. Text on light backgrounds, deep brand surfaces. */
  --brand-color-forest: var(--color-evergreen-900); /* Deep, immersive evergreen background. Heritage name preserved (was base.forest). */
  --brand-color-mist: var(--color-neutral-50); /* Lightest neutral. Off-white surface backgrounds. */
  --brand-color-stone: var(--color-neutral-200); /* Subtle borders, pale washes, separators. */
  --brand-color-bark: var(--color-neutral-700); /* Warm dark neutral. Body text on light backgrounds. */
  --brand-color-charcoal: var(--color-neutral-900); /* Near-black neutral. Dark-mode surfaces, deep marketing backgrounds. */
  --expressive-color-meadow: #73dc8c; /* Bright, airy green. Stat tiles, campaign fields and celebration moments. Expressive (green family): marketing, brand and branded interfaces (Felt), never meaning. Type is the family dark or Black. */
  --expressive-color-mint: #b5edc4; /* Pale, fresh green. Softer expressive fields and cards beside Meadow. Expressive (green family): marketing, brand and branded interfaces (Felt), never meaning. Type is the family dark or Black. */
  --expressive-color-blossom: #fa9bfa; /* Bold pink, Evergreen's opposite on the colour wheel. Moments with attitude. Expressive (pink family): marketing, brand and branded interfaces (Felt), never meaning. Type is the family dark or Black. */
  --expressive-color-petal: #fcccfc; /* Pale pink. Softer expressive fields and cards beside Blossom. Expressive (pink family): marketing, brand and branded interfaces (Felt), never meaning. Type is the family dark or Black. */
  --expressive-color-bluebell: #91b7fe; /* Bright, cool blue. A calm counterpoint to Evergreen for campaigns and feature moments. Expressive (blue family): marketing, brand and branded interfaces (Felt), never meaning. Type is the family dark or Black. */
  --expressive-color-sky: #cddfff; /* Pale blue. Softer expressive fields and cards beside Bluebell. Expressive (blue family): marketing, brand and branded interfaces (Felt), never meaning. Type is the family dark or Black. */
  --expressive-color-marigold: #ffab70; /* Bright, warm orange. Warmth and energy for celebrations, events and launches. Expressive (orange family): marketing, brand and branded interfaces (Felt), never meaning. Type is the family dark or Black. */
  --expressive-color-dawn: #fed4b9; /* Pale orange. Softer expressive fields and cards beside Marigold. Expressive (orange family): marketing, brand and branded interfaces (Felt), never meaning. Type is the family dark or Black. */
  --expressive-color-bramble: #412641; /* Deep pink, Blossom's dark: what Forest is to Evergreen. Type on Blossom and Petal; a deep field with White type. Expressive (pink family, dark): marketing, brand and branded interfaces (Felt), never meaning. */
  --expressive-color-indigo: #20304f; /* Deep blue, Bluebell's dark: what Forest is to Evergreen. Type on Bluebell and Sky; a deep field with White type. Expressive (blue family, dark): marketing, brand and branded interfaces (Felt), never meaning. */
  --expressive-color-chestnut: #482810; /* Deep orange, Marigold's dark: what Forest is to Evergreen. Type on Marigold and Dawn; a deep field with White type. Expressive (orange family, dark): marketing, brand and branded interfaces (Felt), never meaning. */
  --felt-primary: var(--expressive-color-meadow); /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Primary action fill: the Expressive bright. A piece in another family uses its bright (Blossom, Bluebell, Marigold). */
  --felt-on-primary: var(--brand-color-forest); /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Type and icons on the primary: the family dark. Forest on Meadow is 7.5:1. */
  --felt-tint: var(--expressive-color-mint); /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Secondary buttons, badges, selected rows: the family pale in light, the family dark in dark. */
  --felt-on-tint: var(--brand-color-forest); /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Type on the tint: the family dark in light, the family pale in dark. 9.6:1. */
  --felt-canvas: var(--color-base-white); /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). The page: the same as surface-canvas, in both modes. */
  --felt-raised: var(--color-base-white); /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Cards, menus and dialogs. Light lifts with a shadow; dark raises the fill instead. */
  --felt-fill: var(--color-neutral-100); /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). The recessed fill for fields, unselected choices, mode switches and ghost hover. Felt draws no borders. */
  --felt-fill-strong: var(--color-neutral-200); /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Switch tracks when off, and hover on the recessed fill. */
  --felt-text: var(--color-base-black); /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Primary type. */
  --felt-text-muted: var(--color-neutral-600); /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Help text, metadata and placeholders. */
  --felt-text-disabled: var(--color-neutral-400); /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Disabled labels, on the recessed fill. */
  --felt-text-xxs-size: 12px; /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Captions and fine print. */
  --felt-text-xxs-line: 17px;
  --felt-text-xxs-tracking: -0.005em;
  --felt-text-xs-size: 14px; /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Labels, metadata, help text. */
  --felt-text-xs-line: 19px;
  --felt-text-xs-tracking: -0.0075em;
  --felt-text-s-size: 17px; /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Body, buttons and field values. */
  --felt-text-s-line: 24px;
  --felt-text-s-tracking: -0.01em;
  --felt-text-m-size: 19px; /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Lead paragraphs, card titles. */
  --felt-text-m-line: 29px;
  --felt-text-m-tracking: -0.015em;
  --felt-text-l-size: 29px; /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Section and dialog titles. */
  --felt-text-l-line: 39px;
  --felt-text-l-tracking: -0.02em;
  --felt-text-xl-size: 44px; /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Page titles, key figures. */
  --felt-text-xl-line: 49px;
  --felt-text-xl-tracking: -0.03em;
  --felt-text-xxl-size: 59px; /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Hero lines. */
  --felt-text-xxl-line: 63px;
  --felt-text-xxl-tracking: -0.04em;
  --felt-space-xxs: var(--spacing-8); /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Felt spacing step on the 4px grid. */
  --felt-space-xs: var(--spacing-12);
  --felt-space-s: var(--spacing-20);
  --felt-space-m: var(--spacing-28);
  --felt-space-l: var(--spacing-40);
  --felt-space-xl: var(--spacing-56);
  --felt-space-xxl: var(--spacing-80);
  --felt-radius-xs: var(--radius-6); /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Corners: xs chips, s controls, m cards, l dialogs and sheets, xl large panels. */
  --felt-radius-s: var(--radius-12);
  --felt-radius-m: var(--radius-16);
  --felt-radius-l: var(--radius-24);
  --felt-radius-xl: var(--radius-36);
  --felt-shadow-s: 0 0.5px 1px #181B1A0D, 0 2px 4px #181B1A13; /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Hover lift on buttons and switch thumbs. Dark mode uses fill, not shadow. */
  --felt-shadow-m: 0 2px 6px #181B1A0D, 0 8px 24px #181B1A13; /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Cards at rest. */
  --felt-shadow-l: 0 4px 12px #181B1A0D, 0 16px 48px #181B1A13; /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Menus, popovers, toasts and dialogs. */
  --felt-motion-duration: var(--motion-duration-quick); /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Controls, menus and small popovers. */
  --felt-motion-easing: var(--motion-easing-out); /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Quick out, soft in. */
  --felt-motion-duration-large: var(--motion-duration-large); /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Dialogs, sheets, toasts and disclosure. */
  --felt-motion-easing-large: var(--motion-easing-out-large);
  --felt-press-distance: var(--motion-press-distance); /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). A press sinks the control this far. */
  --felt-popup-scale: var(--motion-scale-enter); /* Felt (branded interfaces: website, Studio, campaign apps; 7 Oct 2026). Popups grow in from this scale. */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --elevation-1: 0 1px 2px #00000033, 0 1px 3px #00000024;
    --elevation-2: 0 2px 4px #0000003D, 0 4px 8px #00000029;
    --elevation-3: 0 4px 8px #00000047, 0 8px 16px #00000033;
    --elevation-4: 0 8px 16px #00000052, 0 16px 32px #0000003D;
    --surface-canvas: var(--color-neutral-950);
    --surface-raised: var(--color-neutral-900);
    --surface-overlay: var(--color-neutral-800);
    --text-primary: var(--color-base-white);
    --text-secondary: var(--color-neutral-300);
    --text-subtle: var(--color-neutral-400);
    --text-disabled: var(--color-neutral-600);
    --border-default: var(--color-neutral-700);
    --border-subtle: var(--color-neutral-800);
    --border-strong: var(--color-neutral-500);
    --status-critical-fg: var(--color-critical-300);
    --status-critical-bg-strong: var(--color-critical-600);
    --status-critical-bg-soft: var(--color-critical-800);
    --status-warning-fg: var(--color-warning-300);
    --status-warning-bg-soft: var(--color-warning-800);
    --status-caution-fg: var(--color-caution-300);
    --status-caution-bg-soft: var(--color-caution-900);
    --status-success-fg: var(--color-success-300);
    --status-success-bg-soft: var(--color-success-900);
    --status-info-fg: var(--color-info-300);
    --status-info-bg-soft: var(--color-info-900);
    --status-neutral-fg: var(--color-neutral-300);
    --status-neutral-bg-strong: var(--color-neutral-200);
    --status-neutral-bg-soft: var(--color-neutral-800);
    --status-neutral-on-strong: var(--color-base-black);
    --action-primary-bg-soft: var(--color-evergreen-900);
    --action-secondary-fg: var(--color-base-white);
    --action-secondary-bg: var(--color-neutral-800);
    --action-secondary-hover: var(--color-neutral-700);
    --action-secondary-pressed: var(--color-neutral-600);
    --action-secondary-bg-soft: var(--color-neutral-700);
    --action-destructive-bg-soft: var(--color-critical-800);
    --focus-ring-color: var(--color-evergreen-400);
    --input-bg: var(--color-neutral-900);
    --input-border: var(--color-neutral-500);
    --input-placeholder: var(--color-neutral-400);
    --felt-tint: var(--brand-color-forest);
    --felt-on-tint: var(--expressive-color-mint);
    --felt-canvas: var(--color-neutral-950);
    --felt-raised: var(--color-neutral-900);
    --felt-fill: var(--color-neutral-800);
    --felt-fill-strong: var(--color-neutral-700);
    --felt-text: var(--color-base-white);
    --felt-text-muted: var(--color-neutral-400);
    --felt-text-disabled: var(--color-neutral-600);
    --felt-shadow-s: none;
    --felt-shadow-m: none;
    --felt-shadow-l: none;
  }
}

[data-theme=dark] {
  --elevation-1: 0 1px 2px #00000033, 0 1px 3px #00000024;
  --elevation-2: 0 2px 4px #0000003D, 0 4px 8px #00000029;
  --elevation-3: 0 4px 8px #00000047, 0 8px 16px #00000033;
  --elevation-4: 0 8px 16px #00000052, 0 16px 32px #0000003D;
  --surface-canvas: var(--color-neutral-950);
  --surface-raised: var(--color-neutral-900);
  --surface-overlay: var(--color-neutral-800);
  --text-primary: var(--color-base-white);
  --text-secondary: var(--color-neutral-300);
  --text-subtle: var(--color-neutral-400);
  --text-disabled: var(--color-neutral-600);
  --border-default: var(--color-neutral-700);
  --border-subtle: var(--color-neutral-800);
  --border-strong: var(--color-neutral-500);
  --status-critical-fg: var(--color-critical-300);
  --status-critical-bg-strong: var(--color-critical-600);
  --status-critical-bg-soft: var(--color-critical-800);
  --status-warning-fg: var(--color-warning-300);
  --status-warning-bg-soft: var(--color-warning-800);
  --status-caution-fg: var(--color-caution-300);
  --status-caution-bg-soft: var(--color-caution-900);
  --status-success-fg: var(--color-success-300);
  --status-success-bg-soft: var(--color-success-900);
  --status-info-fg: var(--color-info-300);
  --status-info-bg-soft: var(--color-info-900);
  --status-neutral-fg: var(--color-neutral-300);
  --status-neutral-bg-strong: var(--color-neutral-200);
  --status-neutral-bg-soft: var(--color-neutral-800);
  --status-neutral-on-strong: var(--color-base-black);
  --action-primary-bg-soft: var(--color-evergreen-900);
  --action-secondary-fg: var(--color-base-white);
  --action-secondary-bg: var(--color-neutral-800);
  --action-secondary-hover: var(--color-neutral-700);
  --action-secondary-pressed: var(--color-neutral-600);
  --action-secondary-bg-soft: var(--color-neutral-700);
  --action-destructive-bg-soft: var(--color-critical-800);
  --focus-ring-color: var(--color-evergreen-400);
  --input-bg: var(--color-neutral-900);
  --input-border: var(--color-neutral-500);
  --input-placeholder: var(--color-neutral-400);
  --felt-tint: var(--brand-color-forest);
  --felt-on-tint: var(--expressive-color-mint);
  --felt-canvas: var(--color-neutral-950);
  --felt-raised: var(--color-neutral-900);
  --felt-fill: var(--color-neutral-800);
  --felt-fill-strong: var(--color-neutral-700);
  --felt-text: var(--color-base-white);
  --felt-text-muted: var(--color-neutral-400);
  --felt-text-disabled: var(--color-neutral-600);
  --felt-shadow-s: none;
  --felt-shadow-m: none;
  --felt-shadow-l: none;
}

[data-theme=light] {
  --elevation-1: 0 1px 2px #181B1A0F, 0 1px 3px #181B1A0A;
  --elevation-2: 0 2px 4px #181B1A0F, 0 4px 8px #181B1A0A;
  --elevation-3: 0 4px 8px #181B1A14, 0 8px 16px #181B1A0F;
  --elevation-4: 0 8px 16px #181B1A1A, 0 16px 32px #181B1A14;
  --surface-canvas: var(--color-base-white);
  --surface-raised: var(--color-base-white);
  --surface-overlay: var(--color-base-white);
  --text-primary: var(--color-base-black);
  --text-secondary: var(--color-neutral-700);
  --text-subtle: var(--color-neutral-600);
  --text-disabled: var(--color-neutral-400);
  --border-default: var(--color-neutral-200);
  --border-subtle: var(--color-neutral-100);
  --border-strong: var(--color-neutral-500);
  --status-critical-fg: var(--color-critical-600);
  --status-critical-bg-strong: var(--color-critical-600);
  --status-critical-bg-soft: var(--color-critical-100);
  --status-warning-fg: var(--color-warning-800);
  --status-warning-bg-soft: var(--color-warning-100);
  --status-caution-fg: var(--color-caution-900);
  --status-caution-bg-soft: var(--color-caution-100);
  --status-success-fg: var(--color-success-700);
  --status-success-bg-soft: var(--color-success-100);
  --status-info-fg: var(--color-info-700);
  --status-info-bg-soft: var(--color-info-100);
  --status-neutral-fg: var(--color-neutral-700);
  --status-neutral-bg-strong: var(--color-neutral-700);
  --status-neutral-bg-soft: var(--color-neutral-100);
  --status-neutral-on-strong: var(--color-base-white);
  --action-primary-bg-soft: var(--color-evergreen-100);
  --action-secondary-fg: var(--color-base-black);
  --action-secondary-bg: var(--color-neutral-100);
  --action-secondary-hover: var(--color-neutral-200);
  --action-secondary-pressed: var(--color-neutral-300);
  --action-secondary-bg-soft: var(--color-neutral-200);
  --action-destructive-bg-soft: var(--color-critical-100);
  --focus-ring-color: var(--color-evergreen-700);
  --input-bg: var(--color-base-white);
  --input-border: var(--color-neutral-500);
  --input-placeholder: var(--color-neutral-600);
  --felt-tint: var(--expressive-color-mint);
  --felt-on-tint: var(--brand-color-forest);
  --felt-canvas: var(--color-base-white);
  --felt-raised: var(--color-base-white);
  --felt-fill: var(--color-neutral-100);
  --felt-fill-strong: var(--color-neutral-200);
  --felt-text: var(--color-base-black);
  --felt-text-muted: var(--color-neutral-600);
  --felt-text-disabled: var(--color-neutral-400);
  --felt-shadow-s: 0 0.5px 1px #181B1A0D, 0 2px 4px #181B1A13;
  --felt-shadow-m: 0 2px 6px #181B1A0D, 0 8px 24px #181B1A13;
  --felt-shadow-l: 0 4px 12px #181B1A0D, 0 16px 48px #181B1A13;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-quick: 0ms;
    --motion-duration-quick-exit: 0ms;
    --motion-duration-large: 0ms;
    --motion-duration-large-exit: 0ms;
    --motion-duration-text: 0ms;
    --motion-duration-brand: 0ms;
    --motion-stagger: 0ms;
    --motion-stagger-brand: 0ms;
    --motion-duration-100: 0ms;
    --motion-duration-200: 0ms;
    --motion-duration-300: 0ms;
    --motion-duration-500: 0ms;
    --motion-duration-fast: 0ms;
    --motion-duration-prompt: 0ms;
    --motion-duration-deliberate: 0ms;
    --motion-duration-expansive: 0ms;
    --felt-motion-duration: 0ms;
    --felt-motion-duration-large: 0ms;
  }
}