/**
 * Continua Design Tokens — Light Mode + Primitives
 * Auto-generated by Style Dictionary. DO NOT EDIT DIRECTLY.
 * Edit: design-system/tokens/  |  Rebuild: npm run build:tokens
 */

:root {
  --component-dark-card-action-border: rgba(255, 255, 255, 0.28); /** Dark: Action card border. Bright visible border to define card edges on dark background. */
  --component-bubble-max-width: 85%; /** Chat bubble max-width (mobile). All bubble types hug content up to this cap. ~282px on a 390px phone. */
  --component-bubble-max-width-desktop: 80%; /** Standard chat bubble max-width on desktop (user, social, group). Wider viewports allow slightly longer lines. */
  --component-bubble-agent-max-width-desktop: 70%; /** Agent/perm-picker bubble max-width on desktop. Slightly narrower keeps agent responses from feeling wall-of-text. */
  --component-widget-email-background: #fff3e0; /** Email widget background. Warm amber tint. NOTE: Not in core palette — candidate for palette expansion. */
  --component-widget-email-text: #e65100; /** Email widget text. Deep amber/orange for legibility. NOTE: Not in core palette — candidate for palette expansion. */
  --component-widget-email-badge-background: #e65100; /** Email widget badge background. Deep amber — matches email text, readable with white text. */
  --component-widget-news-background: #f3e5f5; /** News widget background. Light lavender-pink. NOTE: Not in core palette — candidate for palette expansion. */
  --component-widget-news-text: #7b1fa2; /** News widget text. Deep purple. NOTE: Approximate to purple-20 area but not a named token. */
  --component-widget-news-badge-background: #7b1fa2; /** News widget badge background. Deep purple — matches news text color. */
  --component-nav-height: 56px; /** Navigation bar height. Standard nav bar. */
  --component-nav-height-tall: 72px; /** Navigation bar tall height. Used for screens with subtitle or larger title layout. */
  --component-tab-bar-height: 83px; /** Tab bar height. Includes safe area bottom padding (home indicator clearance). */
  --component-status-bar-height: 44px; /** Status bar height. iOS standard. Fixed — do not change. */
  --component-avatar-size-sm: 32px; /** Avatar small — 32px. List item avatars, chip avatars. */
  --component-avatar-size-md: 40px; /** Avatar medium — 40px. Standard message list, cards. */
  --component-avatar-size-lg: 48px; /** Avatar large — 48px. Profile headers, detail screens. */
  --component-avatar-size-xl: 64px; /** Avatar extra large — 64px. Full profile view, onboarding. */
  --component-button-secondary-background: rgba(0, 0, 0, 0); /** Secondary button background. Transparent with border. */
  --component-button-ghost-background: rgba(0, 0, 0, 0); /** Ghost button background. No border, no fill — text only. */
  --component-badge-size: 18px; /** Badge size. Standard notification badge diameter. */
  --component-presence-size: 10px; /** Presence indicator dot size. */
  --color-primitive-purple-0: #000000; /** Purple 0 — absolute black base. Reserved for reference only, never used directly in components. */
  --color-primitive-purple-10: #0e006b; /** Purple 10 — deep brand indigo. Maps to text-primary in light mode. */
  --color-primitive-purple-20: #1a00db; /** Purple 20 — vivid brand indigo. High-saturation fill. */
  --color-primitive-purple-30: #4434ff; /** Purple 30 — bright primary. Brand primary dark variant. */
  --color-primitive-purple-40: #5a4aff; /** Purple 40 — brand primary. Core action color: CTAs, active states, links. */
  --color-primitive-purple-50: #7568ff; /** Purple 50 — primary mid. Hover states in light mode. */
  --color-primitive-purple-60: #9186ff; /** Purple 60 — primary light. Maps to brand-primary in dark mode; secondary fills. */
  --color-primitive-purple-70: #aca4ff; /** Purple 70 — soft primary. Subtle highlights, icon secondary in dark mode. */
  --color-primitive-purple-80: #c8c3ff; /** Purple 80 — pastel primary. Background tints, icon primary in dark mode. */
  --color-primitive-purple-90: #d6d5ff; /** Purple 90 — very light lavender. Primary text in dark mode; social bubble background in light mode. */
  --color-primitive-purple-95: #e3e1ff; /** Purple 95 — near-white lavender. Chip hover state in light mode. */
  --color-primitive-purple-98: #f5f5ff; /** Purple 98 — barely-there tint. Background surfaces near white. */
  --color-primitive-purple-100: #ffffff; /** Purple 100 — white. Represents full-lightness end of purple scale. */
  --color-primitive-cyan-0: #000000; /** Cyan 0 — black base. */
  --color-primitive-cyan-10: #01586a; /** Cyan 10 — deep teal. Widget email background in dark mode. */
  --color-primitive-cyan-20: #1c97b0; /** Cyan 20 — medium teal. */
  --color-primitive-cyan-30: #2fc1e0; /** Cyan 30 — bright teal. */
  --color-primitive-cyan-40: #4fd8f5; /** Cyan 40 — vibrant cyan. */
  --color-primitive-cyan-50: #5ae1fd; /** Cyan 50 — secondary-cyan base. Maps to secondary.cyan in light mode. */
  --color-primitive-cyan-60: #86e9fd; /** Cyan 60 — light cyan. Maps to secondary.cyan in dark mode. */
  --color-primitive-cyan-70: #a5effd; /** Cyan 70 — very light cyan. */
  --color-primitive-cyan-80: #c3f4fe; /** Cyan 80 — pastel cyan. secondary-cyan-dark in dark mode. */
  --color-primitive-cyan-90: #d7f8fe; /** Cyan 90 — near-white cyan. */
  --color-primitive-cyan-95: #e1fafe; /** Cyan 95 — barely cyan white. */
  --color-primitive-cyan-98: #f5fdff; /** Cyan 98 — almost white. */
  --color-primitive-cyan-100: #ffffff; /** Cyan 100 — white. */
  --color-primitive-blue-0: #000000; /** Blue 0 — black base. */
  --color-primitive-blue-10: #01456a; /** Blue 10 — deep sky blue. Widget flight text in light mode. */
  --color-primitive-blue-20: #038ed8; /** Blue 20 — bright blue. */
  --color-primitive-blue-30: #2bb3fc; /** Blue 30 — vivid sky. */
  --color-primitive-blue-40: #5ac4fd; /** Blue 40 — light sky. */
  --color-primitive-blue-50: #72cdfd; /** Blue 50 — soft sky. */
  --color-primitive-blue-60: #86d4fd; /** Blue 60 — pale sky. */
  --color-primitive-blue-70: #a5defd; /** Blue 70 — very pale sky. Widget flight text in dark mode. */
  --color-primitive-blue-80: #bde5fb; /** Blue 80 — pastel blue. Secondary blue-light; widget flight background in light mode. */
  --color-primitive-blue-90: #d2effe; /** Blue 90 — near-white blue. */
  --color-primitive-blue-95: #e6f6fe; /** Blue 95 — barely blue white. */
  --color-primitive-blue-98: #f5fbff; /** Blue 98 — almost white. */
  --color-primitive-blue-100: #ffffff; /** Blue 100 — white. */
  --color-primitive-green-0: #000000; /** Green 0 — black base. */
  --color-primitive-green-10: #033a2d; /** Green 10 — deep forest. Secondary-green-light in dark mode. */
  --color-primitive-green-20: #045743; /** Green 20 — dark forest. Widget calendar background in dark mode. */
  --color-primitive-green-30: #046b53; /** Green 30 — forest. Widget calendar text in light mode. */
  --color-primitive-green-40: #048064; /** Green 40 — medium green. */
  --color-primitive-green-50: #038b6c; /** Green 50 — brand green. Maps to secondary.green in light mode. */
  --color-primitive-green-60: #41ad8b; /** Green 60 — medium sage. */
  --color-primitive-green-70: #6fc5a2; /** Green 70 — light sage. Secondary-green in dark mode; widget calendar text in dark mode. */
  --color-primitive-green-80: #ade7c1; /** Green 80 — mint. Secondary-green-light in light mode. */
  --color-primitive-green-90: #c8efd5; /** Green 90 — pale mint. */
  --color-primitive-green-95: #e1f7e9; /** Green 95 — near-white mint. Widget calendar background in light mode. */
  --color-primitive-green-98: #f4fcf7; /** Green 98 — barely green white. */
  --color-primitive-green-100: #ffffff; /** Green 100 — white. */
  --color-primitive-yellow-energy-0: #000000; /** Yellow Energy 0 — black base. */
  --color-primitive-yellow-energy-10: #2e3602; /** Yellow Energy 10 — very dark olive. */
  --color-primitive-yellow-energy-20: #434f03; /** Yellow Energy 20 — dark olive. */
  --color-primitive-yellow-energy-30: #546204; /** Yellow Energy 30 — olive. */
  --color-primitive-yellow-energy-40: #6d8005; /** Yellow Energy 40 — yellow-green. */
  --color-primitive-yellow-energy-50: #94ad00; /** Yellow Energy 50 — chartreuse. */
  --color-primitive-yellow-energy-60: #b2d100; /** Yellow Energy 60 — bright lime. */
  --color-primitive-yellow-energy-70: #c3e500; /** Yellow Energy 70 — electric lime. Accent-yellow in dark mode. */
  --color-primitive-yellow-energy-80: #d5f427; /** Yellow Energy 80 — electric yellow. Maps to accent.yellow in light mode. */
  --color-primitive-yellow-energy-90: #e1fd3f; /** Yellow Energy 90 — neon yellow. */
  --color-primitive-yellow-energy-95: #f3ffad; /** Yellow Energy 95 — pale yellow. */
  --color-primitive-yellow-energy-98: #fcffeb; /** Yellow Energy 98 — barely yellow white. */
  --color-primitive-yellow-energy-100: #ffffff; /** Yellow Energy 100 — white. */
  --color-primitive-green-energy-0: #000000; /** Green Energy 0 — black base. */
  --color-primitive-green-energy-10: #02361c; /** Green Energy 10 — very dark emerald. */
  --color-primitive-green-energy-20: #034f29; /** Green Energy 20 — dark emerald. */
  --color-primitive-green-energy-30: #046233; /** Green Energy 30 — emerald. */
  --color-primitive-green-energy-40: #058042; /** Green Energy 40 — medium emerald. */
  --color-primitive-green-energy-50: #00994d; /** Green Energy 50 — vivid green. */
  --color-primitive-green-energy-60: #00b259; /** Green Energy 60 — bright green. */
  --color-primitive-green-energy-70: #00cc66; /** Green Energy 70 — electric green. */
  --color-primitive-green-energy-80: #00e573; /** Green Energy 80 — neon green. Accent-green in dark mode. */
  --color-primitive-green-energy-90: #00fd7f; /** Green Energy 90 — acid green. Maps to accent.green in light mode. */
  --color-primitive-green-energy-95: #adffd6; /** Green Energy 95 — pale neon. */
  --color-primitive-green-energy-98: #ebfff5; /** Green Energy 98 — barely green white. */
  --color-primitive-green-energy-100: #ffffff; /** Green Energy 100 — white. */
  --color-primitive-neutral-warm-0: #000000; /** Neutral Warm 0 — black base. */
  --color-primitive-neutral-warm-10: #23221a; /** Neutral Warm 10 — very dark warm gray. */
  --color-primitive-neutral-warm-20: #38372f; /** Neutral Warm 20 — dark warm gray. Secondary-warm in dark mode; widget news background in dark mode. */
  --color-primitive-neutral-warm-30: #4f4e45; /** Neutral Warm 30 — medium dark warm gray. */
  --color-primitive-neutral-warm-40: #67665d; /** Neutral Warm 40 — medium warm gray. */
  --color-primitive-neutral-warm-50: #807f76; /** Neutral Warm 50 — mid warm gray. */
  --color-primitive-neutral-warm-60: #9a9990; /** Neutral Warm 60 — light warm gray. */
  --color-primitive-neutral-warm-70: #b4b3aa; /** Neutral Warm 70 — pale warm gray. */
  --color-primitive-neutral-warm-80: #dddcd3; /** Neutral Warm 80 — very pale warm. Maps to secondary.warm in light mode; widget news text in dark mode. */
  --color-primitive-neutral-warm-90: #ecebe1; /** Neutral Warm 90 — off-white warm. */
  --color-primitive-neutral-warm-95: #faf9f0; /** Neutral Warm 95 — barely warm white. */
  --color-primitive-neutral-warm-98: #fffef8; /** Neutral Warm 98 — warm white. */
  --color-primitive-neutral-warm-100: #ffffff; /** Neutral Warm 100 — white. */
  --color-primitive-neutral-cool-0: #000000; /** Neutral Cool 0 — black base. */
  --color-primitive-neutral-cool-10: #1c1b22; /** Neutral Cool 10 — deepest dark surface. bg-0 in dark mode (main background). */
  --color-primitive-neutral-cool-15: #2a2932; /** Neutral Cool 15 — elevated dark surface. bg-1 in dark mode — visibly lighter than bg-0, slightly darker than bg-2. */
  --color-primitive-neutral-cool-20: #2e2d3a; /** Neutral Cool 20 — dark surface. bg-2, bg-surface in dark mode. */
  --color-primitive-neutral-cool-30: #414054; /** Neutral Cool 30 — elevated dark surface. bg-3, border, border-light in dark mode. */
  --color-primitive-neutral-cool-40: #555272; /** Neutral Cool 40 — medium cool. bg-4 in dark mode; text-secondary in light mode. */
  --color-primitive-neutral-cool-50: #716e92; /** Neutral Cool 50 — mid cool. text-tertiary in dark mode. */
  --color-primitive-neutral-cool-60: #b1afc5; /** Neutral Cool 60 — light cool. text-tertiary in light mode. */
  --color-primitive-neutral-cool-70: #cac9d9; /** Neutral Cool 70 — very light cool. text-secondary in dark mode. */
  --color-primitive-neutral-cool-80: #e1e0eb; /** Neutral Cool 80 — near-white cool. text-disabled in light mode; home bar in dark mode. */
  --color-primitive-neutral-cool-90: #f0f0f5; /** Neutral Cool 90 — off-white cool. bg-3, bg-viewport, border in light mode. */
  --color-primitive-neutral-cool-95: #f6f6f9; /** Neutral Cool 95 — barely cool white. bg-2, border-light in light mode. */
  --color-primitive-neutral-cool-98: #f9f9fb; /** Neutral Cool 98 — near white. bg-1 in light mode. */
  --color-primitive-neutral-cool-100: #ffffff; /** Neutral Cool 100 — white. bg-0, bg-surface in light mode. */
  --color-primitive-neutral-gray-0: #000000; /** Neutral Gray 0 — pure black. Debug tooling background base. */
  --color-primitive-neutral-gray-10: #1f1f1f; /** Neutral Gray 10 — very dark gray. Debug panel background. */
  --color-primitive-neutral-gray-20: #343434; /** Neutral Gray 20 — dark gray. Debug panel elevated surface. */
  --color-primitive-neutral-gray-30: #4a4a4a; /** Neutral Gray 30 — medium dark gray. Debug panel border. */
  --color-primitive-neutral-gray-40: #626262; /** Neutral Gray 40 — medium gray. */
  --color-primitive-neutral-gray-50: #808080; /** Neutral Gray 50 — neutral mid gray. */
  --color-primitive-neutral-gray-60: #959595; /** Neutral Gray 60 — light-medium gray. Debug dim text. */
  --color-primitive-neutral-gray-70: #afafaf; /** Neutral Gray 70 — light gray. */
  --color-primitive-neutral-gray-80: #cccccc; /** Neutral Gray 80 — very light gray. Debug text. */
  --color-primitive-neutral-gray-90: #e6e6e6; /** Neutral Gray 90 — near-white gray. */
  --color-primitive-neutral-gray-95: #f5f5f5; /** Neutral Gray 95 — barely gray white. */
  --color-primitive-neutral-gray-98: #fbfbfb; /** Neutral Gray 98 — warm white. */
  --color-primitive-neutral-gray-100: #ffffff; /** Neutral Gray 100 — white. */
  --color-dark-bg-viewport: #0e0c14; /** Dark: Background viewport. Custom deep background — slightly warmer than neutral-cool-10. */
  --color-dark-bg-overlay: rgba(0, 0, 0, 0.55); /** Dark: Background overlay. Neutral dark scrim in dark mode. */
  --color-dark-bg-blur: rgba(28, 27, 34, 0.92); /** Dark: Background blur. Dark frosted glass. */
  --color-dark-bg-blur-heavy: rgba(28, 27, 34, 0.96); /** Dark: Background blur heavy. Dense dark frosted glass. */
  --color-dark-border-avatar: rgba(200, 195, 255, 0.15); /** Dark: Avatar border. Subtle light-purple tinted ring. */
  --color-dark-shadow-phone: 0px 4px 30px rgba(0,0,0,0.30), 0px 0px 90px rgba(0,0,0,0.60); /** Dark: Phone frame shadow. Deeper for dark mode. */
  --color-dark-shadow-modal: 0 12px 40px rgba(0,0,0,0.40); /** Dark: Modal shadow. Deeper for dark mode. */
  --color-dark-state-danger: #ff6b6b; /** Dark: State danger. Lightened for legibility on dark surfaces. */
  --color-dark-state-warning: #ffb74d; /** Dark: State warning. */
  --color-dark-state-success: #81c784; /** Dark: State success. */
  --color-bg-overlay: rgba(14, 0, 107, 0.35); /** Background overlay. Dim layer behind modals and bottom sheets. Brand-tinted dark scrim. */
  --color-bg-blur: rgba(255, 255, 255, 0.92); /** Background blur. Frosted glass surface — nav bars, tab bars, top bars with backdrop-filter: blur(). */
  --color-bg-blur-heavy: rgba(255, 255, 255, 0.96); /** Background blur heavy. Denser frosted glass for critical UI layers (sign-in sheets, action sheets). */
  --color-border-avatar: rgba(14, 0, 107, 0.1); /** Avatar border. Ring around avatar images. Brand-tinted, very subtle — reinforces brand without competing. */
  --color-shadow-phone: 0px 4px 30px rgba(0,0,0,0.08), 0px 0px 90px rgba(0,0,0,0.35); /** Phone frame shadow. Applied to the mobile phone frame in prototype view. Deep ambient + soft close shadow. */
  --color-shadow-modal: 0 12px 40px rgba(0,0,0,0.18); /** Modal shadow. Elevation shadow for modals, bottom sheets, popovers. Lifts surface above content. */
  --color-state-danger: #fa4646; /** State danger. Errors, destructive actions, delete confirmations, validation failures. Never use for decorative purposes. */
  --color-state-warning: #f0af32; /** State warning. Alerts, cautionary states, degraded conditions. Use with text label — never color alone. */
  --color-state-success: #32db62; /** State success. Confirmations, completed actions, healthy status. Use with text label — never color alone. */
  --motion-duration-instant: 0ms; /** Duration instant — 0ms. Immediate — no animation. Desktop layout transitions, debug state changes. */
  --motion-duration-fast: 100ms; /** Duration fast — 100ms. Fade-in for hover states, micro-feedback, badge updates. The exit/fade-out speed for hovers. */
  --motion-duration-normal: 200ms; /** Duration normal — 200ms. Standard UI transitions. Tab switches, chip selection, toggle states. */
  --motion-duration-enter: 300ms; /** Duration enter — 300ms. Screens sliding in, modals opening, bottom sheets rising. Slightly slower to feel deliberate. */
  --motion-duration-exit: 200ms; /** Duration exit — 200ms. Screens sliding out, modals closing. Faster exits feel snappy, not sluggish. */
  --motion-duration-slow: 400ms; /** Duration slow — 400ms. Complex multi-step transitions, content reveals, emphasis animations. Use sparingly. */
  --motion-easing-standard: cubic-bezier(0.4, 0, 0.05, 1); /** Easing standard. Default for most transitions — accelerates quickly, decelerates gracefully. Use for elements moving on screen. */
  --motion-easing-decelerate: cubic-bezier(0, 0, 0.05, 1); /** Easing decelerate. Enters fast, stops gently. Use for elements entering the screen (bottom sheets, modals sliding in). */
  --motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /** Easing accelerate. Starts slow, exits fast. Use for elements leaving the screen (dismiss, close). */
  --motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /** Easing spring. Slight overshoot for personality. Use for agent appearance, playful confirmations, success states. Use sparingly. */
  --radius-none: 0px; /** Radius none — 0px. Sharp corners. Use for flush-edge dividers, full-bleed images, debug elements. */
  --radius-xs: 4px; /** Radius extra small — 4px. Subtle rounding for nested child cards within a container (e.g., perm-picker options). */
  --radius-sm: 8px; /** Radius small — 8px. Small chips, small badges, input fields, inline code blocks. */
  --radius-md: 12px; /** Radius medium — 12px. Standard cards, chat bubbles, action sheets, widgets. */
  --radius-lg: 16px; /** Radius large — 16px. Prominent cards, modals, bottom sheets, large interactive surfaces. */
  --radius-xl: 20px; /** Radius extra large — 20px. Large cards, sign-in sheet, feature surfaces. */
  --radius-2xl: 24px; /** Radius 2x large — 24px. Hero cards, large sheet surfaces, prominent overlays. */
  --radius-phone: 32px; /** Radius phone — 32px. Mobile phone frame border radius. Matches iPhone 12 Pro physical dimensions. */
  --radius-full: 9999px; /** Radius full — pill. Chips, tags, avatar rings, toggle switches, rounded buttons. Always produces a pill shape. */
  --spacing-0: 0px; /** Spacing 0 — 0px. Explicit zero. Use to override inherited spacing, never as default. */
  --spacing-1: 4px; /** Spacing 1 — 4px. Micro gaps. Icon-to-label gap, badge padding, tight internal spacing. */
  --spacing-2: 8px; /** Spacing 2 — 8px. Small gaps. Row internal padding, chip padding, avatar-to-text gap. */
  --spacing-3: 12px; /** Spacing 3 — 12px. Medium-small gaps. Input vertical padding, bubble padding, card internal margin. */
  --spacing-4: 16px; /** Spacing 4 — 16px. Standard gap. Default horizontal padding for content, list items, nav bars. */
  --spacing-5: 20px; /** Spacing 5 — 20px. Medium gap. Section internal padding, widget inner spacing. */
  --spacing-6: 24px; /** Spacing 6 — 24px. Comfortable gap. Card padding, section top/bottom margins, modal padding. */
  --spacing-8: 32px; /** Spacing 8 — 32px. Large gap. Between major sections, screen-level vertical rhythm. */
  --spacing-10: 40px; /** Spacing 10 — 40px. Extra large gap. Top padding for sheets, major section separation. */
  --spacing-12: 48px; /** Spacing 12 — 48px. 2x large gap. Generous section spacing, hero content breathing room. */
  --spacing-16: 64px; /** Spacing 16 — 64px. 4x large gap. Full-screen section margins, large content blocks. */
  --spacing-24: 96px; /** Spacing 24 — 96px. Maximum standard gap. Reserved for full-screen layout structural spacing. */
  --typography-family-base: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; /** Base font family. System-native stack — renders as SF Pro on Apple, Roboto/Segoe on other platforms. Never substitute a web font without design approval. */
  --typography-family-mono: 'SF Mono', ui-monospace, 'Cascadia Code', monospace; /** Monospace font family. Used for code, agent log output, debug panel, technical values. */
  --typography-size-display: 34px; /** Display — 34px. Large titles, hero headings, splash screens. Use sparingly — maximum one per screen. */
  --typography-size-title-1: 28px; /** Title 1 — 28px. Primary screen titles, major section headings. */
  --typography-size-title-2: 22px; /** Title 2 — 22px. Secondary headings, card titles, sheet headers. */
  --typography-size-title-3: 20px; /** Title 3 — 20px. Sub-section headings, prominent labels. */
  --typography-size-headline: 17px; /** Headline — 17px. Bold body text, message headers, nav bar titles. Same size as body but semibold. */
  --typography-size-body: 17px; /** Body — 17px. Primary reading text. Chat messages, content, form inputs. */
  --typography-size-callout: 16px; /** Callout — 16px. Slightly smaller body. Descriptions, secondary content, cards. */
  --typography-size-subheadline: 15px; /** Subheadline — 15px. Labels, chip text, secondary nav text, timestamps. */
  --typography-size-footnote: 13px; /** Footnote — 13px. Small labels, metadata, widget details, secondary info. */
  --typography-size-caption-1: 12px; /** Caption 1 — 12px. Very small labels, badges, notification dots, avatars. */
  --typography-size-caption-2: 11px; /** Caption 2 — 11px. Minimum legible size. Status bar time, micro-labels. Never go below this. */
  --typography-weight-regular: 400; /** Regular — 400. Default body and secondary text weight. */
  --typography-weight-medium: 500; /** Medium — 500. Slightly emphasized labels, list item titles, active states. */
  --typography-weight-semibold: 600; /** Semibold — 600. Headline text, nav bar titles, prominent labels, card headings. */
  --typography-weight-bold: 700; /** Bold — 700. Maximum emphasis — display text, CTAs, status bar time, critical values. */
  --typography-line-height-tight: 1.2; /** Line height tight — 1.2x. Display and title text, single-line UI labels. Compact, high-impact. */
  --typography-line-height-normal: 1.4; /** Line height normal — 1.4x. Headlines, callouts, short body paragraphs. Default for most UI text. */
  --typography-line-height-relaxed: 1.6; /** Line height relaxed — 1.6x. Long-form body copy, agent message content, readable paragraphs. */
  --typography-letter-spacing-tight: -0.5px; /** Letter spacing tight — -0.5px. Display and title text. Tighter tracking for large text looks more polished. */
  --typography-letter-spacing-normal: 0px; /** Letter spacing normal — 0. Body and most UI text. Default spacing. */
  --typography-letter-spacing-wide: 0.5px; /** Letter spacing wide — 0.5px. All-caps labels, small category tags, badge text. */
  --component-dark-chip-hover-bg: var(--color-primitive-purple-20); /** Dark: Chip hover background. Deep purple tint on dark surface. */
  --component-dark-bubble-user-background: var(--color-primitive-purple-40); /** Dark: User bubble background. Slightly deeper primary for dark surfaces. */
  --component-dark-widget-flight-text: var(--color-primitive-blue-70); /** Dark: Flight widget text. Light blue for legibility on dark. */
  --component-dark-widget-flight-badge-background: var(--color-primitive-blue-30); /** Dark: Flight widget badge background. Mid-blue — visible on dark with white text. */
  --component-dark-widget-calendar-background: var(--color-primitive-green-20); /** Dark: Calendar widget background. Deep forest green. */
  --component-dark-widget-calendar-text: var(--color-primitive-green-70); /** Dark: Calendar widget text. Light sage for legibility. */
  --component-dark-widget-calendar-badge-background: var(--color-primitive-green-50); /** Dark: Calendar widget badge background. Mid-forest green — readable with white text. */
  --component-dark-widget-email-background: var(--color-primitive-cyan-10); /** Dark: Email widget background. Deep teal in dark mode. */
  --component-dark-widget-email-badge-background: var(--color-primitive-cyan-20); /** Dark: Email widget badge background. Mid-teal — good contrast with white text on dark email widget. */
  --component-dark-widget-news-background: var(--color-primitive-neutral-warm-20); /** Dark: News widget background. Dark warm gray. */
  --component-dark-widget-news-text: var(--color-primitive-neutral-warm-80); /** Dark: News widget text. Warm light gray for legibility. */
  --component-dark-widget-news-badge-background: var(--color-primitive-purple-40); /** Dark: News widget badge background. Brand purple — visible on dark warm gray. */
  --component-dark-signin-background: var(--color-dark-bg-viewport); /** Dark: Sign-in screen background. Viewport dark instead of brand primary in dark mode. */
  --component-dark-home-bar-background: var(--color-primitive-neutral-cool-80); /** Dark: Home bar color. Light neutral visible on dark background. */
  --component-chip-hover-bg: var(--color-primitive-purple-95); /** Chip hover background. Very light lavender tint on hover. Light mode only. */
  --component-action-card-hover-bg: var(--color-primitive-purple-95); /** Action card hover background — light lavender tint (light mode only). Paired with filter: brightness() for a clear hover state. Neutral cards do not use this token. */
  --component-widget-flight-text: var(--color-primitive-blue-10); /** Flight widget text. Deep blue for legibility on pale blue background. */
  --component-widget-flight-badge-background: var(--color-primitive-blue-10); /** Flight widget badge background. Deep blue — matches flight widget text color. */
  --component-widget-calendar-background: var(--color-primitive-green-95); /** Calendar widget background. Pale mint green — scheduling/nature association. */
  --component-widget-calendar-text: var(--color-primitive-green-30); /** Calendar widget text. Deep forest green for legibility. */
  --component-widget-calendar-badge-background: var(--color-primitive-green-30); /** Calendar widget badge background. Deep forest green — matches calendar text color. */
  --component-nav-background: var(--color-bg-blur); /** Navigation bar background. Frosted glass. Always paired with backdrop-filter: blur(12px). */
  --component-tab-bar-background: var(--color-bg-blur); /** Tab bar background. Frosted glass. Always paired with backdrop-filter. */
  --component-avatar-border: var(--color-border-avatar); /** Avatar border ring. Brand-tinted, very subtle. */
  --component-button-primary-radius: var(--radius-full); /** Primary button radius. Pill shape. */
  --component-button-destructive-background: var(--color-state-danger); /** Destructive button background. Danger state fill for delete/remove actions. */
  --component-badge-background: var(--color-state-danger); /** Badge background. Unread count, notification dot. Danger red by default. */
  --component-toast-radius: var(--radius-lg); /** Toast notification radius. */
  --color-dark-text-primary: var(--color-primitive-purple-90); /** Dark: Primary text. Light lavender on dark surfaces. */
  --color-dark-text-secondary: var(--color-primitive-neutral-cool-70); /** Dark: Secondary text. Muted cool gray. */
  --color-dark-text-tertiary: var(--color-primitive-neutral-cool-50); /** Dark: Tertiary text. Subtle mid-range cool. */
  --color-dark-text-disabled: var(--color-primitive-neutral-cool-30); /** Dark: Disabled text. Very muted — barely legible by design. */
  --color-dark-text-contrast: var(--color-primitive-neutral-cool-100); /** Dark: Contrast text. Always white — same as light mode. */
  --color-dark-brand-primary: var(--color-primitive-purple-60); /** Dark: Brand primary. Lifted to 60 for legibility on dark surfaces. */
  --color-dark-brand-primary-light: var(--color-primitive-purple-70); /** Dark: Brand primary light. */
  --color-dark-brand-primary-lighter: var(--color-primitive-purple-30); /** Dark: Brand primary lighter. Inverted — darker in dark mode for tint use. */
  --color-dark-brand-primary-dark: var(--color-primitive-purple-40); /** Dark: Brand primary dark. */
  --color-dark-brand-primary-subtle: var(--color-primitive-purple-20); /** Dark: Brand primary subtle. Deep tint for social bubble in dark mode. */
  --color-dark-secondary-cyan: var(--color-primitive-cyan-60); /** Dark: Secondary cyan. */
  --color-dark-secondary-cyan-dark: var(--color-primitive-cyan-80); /** Dark: Secondary cyan dark — lighter in dark mode for legibility. */
  --color-dark-secondary-blue-light: var(--color-primitive-blue-10); /** Dark: Secondary blue light — very dark teal for dark surfaces. */
  --color-dark-secondary-green: var(--color-primitive-green-70); /** Dark: Secondary green. */
  --color-dark-secondary-green-light: var(--color-primitive-green-10); /** Dark: Secondary green light — deep forest for dark surfaces. */
  --color-dark-secondary-warm: var(--color-primitive-neutral-warm-20); /** Dark: Secondary warm — deep warm gray. */
  --color-dark-accent-yellow: var(--color-primitive-yellow-energy-70); /** Dark: Accent yellow. */
  --color-dark-accent-green: var(--color-primitive-green-energy-80); /** Dark: Accent green. */
  --color-dark-bg-0: var(--color-primitive-neutral-cool-10); /** Dark: Background 0 — deepest dark. Cards and primary surfaces in dark mode. */
  --color-dark-bg-1: var(--color-primitive-neutral-cool-20); /** Dark: Background 1 — dark elevated. */
  --color-dark-bg-2: var(--color-primitive-neutral-cool-20); /** Dark: Background 2 — dark (same as 1 for subtle layering). */
  --color-dark-bg-3: var(--color-primitive-neutral-cool-30); /** Dark: Background 3 — elevated dark. */
  --color-dark-bg-4: var(--color-primitive-neutral-cool-40); /** Dark: Background 4 — highest-contrast dark surface. */
  --color-dark-bg-surface: var(--color-primitive-neutral-cool-20); /** Dark: Background surface. */
  --color-dark-border-default: var(--color-primitive-neutral-cool-30); /** Dark: Default border. */
  --color-dark-border-light: var(--color-primitive-neutral-cool-30); /** Dark: Light border (same as default — less distinct in dark mode). */
  --color-dark-icon-primary: var(--color-primitive-purple-80); /** Dark: Icon primary. Light purple — readable on dark surfaces. */
  --color-dark-icon-secondary: var(--color-primitive-purple-50); /** Dark: Icon secondary. Medium purple — distinct fill for dual-color icons. */
  --color-text-primary: var(--color-primitive-purple-10); /** Primary text. Headlines, body copy, labels, important values. Use for content that demands full attention. */
  --color-text-secondary: var(--color-primitive-neutral-cool-40); /** Secondary text. Supporting copy, metadata, timestamps, subtitles. Use when content is context, not primary message. */
  --color-text-tertiary: var(--color-primitive-neutral-cool-60); /** Tertiary text. Placeholders, hints, disabled labels, fine print. Lowest-emphasis readable text. */
  --color-text-disabled: var(--color-primitive-neutral-cool-80); /** Disabled text. Non-interactive, unavailable states. Never use for readable content — legibility is intentionally low. */
  --color-text-contrast: var(--color-primitive-neutral-cool-100); /** Contrast text. Always white — use on colored backgrounds (primary button, colored chips, sign-in screen). Never use on white or light surfaces. */
  --color-brand-primary: var(--color-primitive-purple-40); /** Brand primary. Use for CTAs, selected states, links, active tab indicators, and primary buttons. The main interactive color. */
  --color-brand-primary-light: var(--color-primitive-purple-60); /** Brand primary light. Hover states, secondary interactive elements, icon secondary fills, unread indicators. */
  --color-brand-primary-lighter: var(--color-primitive-purple-80); /** Brand primary lighter. Subtle tints, badge backgrounds, selected row backgrounds. Never use as text on white. */
  --color-brand-primary-dark: var(--color-primitive-purple-30); /** Brand primary dark. Pressed/active states, deepest brand emphasis. Use sparingly. */
  --color-brand-primary-subtle: var(--color-primitive-purple-90); /** Brand primary subtle. Very light tint for social bubble backgrounds and background highlights in light mode. */
  --color-secondary-cyan: var(--color-primitive-cyan-50); /** Secondary cyan. Accent fills, AI response indicators, feature highlights. Use sparingly alongside primary. */
  --color-secondary-cyan-dark: var(--color-primitive-cyan-10); /** Secondary cyan dark. Deep teal for text-on-light or icon use with cyan theme. */
  --color-secondary-blue-light: var(--color-primitive-blue-80); /** Secondary blue light. Widget flight backgrounds, travel-themed surfaces. */
  --color-secondary-green: var(--color-primitive-green-50); /** Secondary green. Positive states, confirmation actions, calendar accents, health indicators. */
  --color-secondary-green-light: var(--color-primitive-green-80); /** Secondary green light. Subtle positive backgrounds, success states, avatar backgrounds. */
  --color-secondary-warm: var(--color-primitive-neutral-warm-80); /** Secondary warm. Neutral warm accent for avatars, tags, and surfaces needing warmth without brand color. */
  --color-accent-yellow: var(--color-primitive-yellow-energy-80); /** Accent yellow. Highlights, energy indicators, new/unread badges. Use sparingly — high visual weight. */
  --color-accent-green: var(--color-primitive-green-energy-90); /** Accent green. Presence online indicator, success confirmation, live/active state. Use sparingly. */
  --color-bg-0: var(--color-primitive-neutral-cool-100); /** Background 0 — white. Cards, sheets, modal surfaces, primary content areas. The brightest surface. */
  --color-bg-1: var(--color-primitive-neutral-cool-98); /** Background 1 — near-white. Slightly recessed surfaces, message list items, secondary cards. */
  --color-bg-2: var(--color-primitive-neutral-cool-95); /** Background 2 — subtle tint. Agent chat bubbles, chip backgrounds, input backgrounds. */
  --color-bg-3: var(--color-primitive-neutral-cool-90); /** Background 3 — light separator. Section dividers, grouped content, secondary input surfaces. */
  --color-bg-4: var(--color-primitive-neutral-cool-80); /** Background 4 — mid-light. Widget weather background, heavier dividers, lowest-emphasis surfaces. */
  --color-bg-viewport: var(--color-primitive-neutral-cool-90); /** Background viewport. The page/app background behind all surfaces. Not used directly on components. */
  --color-bg-surface: var(--color-primitive-neutral-cool-100); /** Background surface. Primary container surface (same as bg-0 in light mode). Use for main content panels. */
  --color-border-default: var(--color-primitive-neutral-cool-90); /** Default border. Dividers between list items, card edges, section separators. Light, structural. */
  --color-border-light: var(--color-primitive-neutral-cool-95); /** Light border. Subtler dividers — inner content separators, less prominent edges. */
  --color-icon-primary: var(--color-primitive-purple-10); /** Icon primary. Main SVG fill color — outlines, strokes, single-color icons. Matches primary text in light mode. */
  --color-icon-secondary: var(--color-primitive-purple-60); /** Icon secondary. Interior fill on dual-color icons. Lighter complement to icon primary. */
  --color-debug-bg: var(--color-primitive-neutral-gray-10); /** Debug background. Debug panel background. Not part of production UI. */
  --color-debug-bg-elevated: var(--color-primitive-neutral-gray-20); /** Debug background elevated. Debug panel raised surfaces. */
  --color-debug-text: var(--color-primitive-neutral-gray-80); /** Debug text. Primary text in debug panel. */
  --color-debug-text-dim: var(--color-primitive-neutral-gray-60); /** Debug text dim. Secondary/label text in debug panel. */
  --color-debug-border: var(--color-primitive-neutral-gray-30); /** Debug border. Dividers within debug panel. */
  --component-dark-bubble-social-background: var(--color-dark-bg-3); /** Dark: Social bubble background. Uses elevated dark surface instead of lavender tint. */
  --component-dark-bubble-action-inline-background: var(--color-dark-bg-1); /** Dark: Inline action bubble background. Dark elevated surface. */
  --component-dark-widget-weather-background: var(--color-dark-bg-1); /** Dark: Weather widget background. Dark surface 1. */
  --component-dark-widget-weather-badge-background: var(--color-dark-brand-primary); /** Dark: Weather widget badge background. Brand primary in dark mode. */
  --component-dark-widget-weather-badge-text: var(--color-dark-text-contrast); /** Dark: Weather widget badge text. */
  --component-dark-widget-flight-background: var(--color-dark-bg-1); /** Dark: Flight widget background. Dark surface instead of pale blue. */
  --component-dark-widget-flight-badge-text: var(--color-dark-text-contrast); /** Dark: Flight widget badge text. */
  --component-dark-widget-calendar-badge-text: var(--color-dark-text-contrast); /** Dark: Calendar widget badge text. */
  --component-dark-widget-email-text: var(--color-dark-secondary-cyan); /** Dark: Email widget text. Light cyan for legibility. */
  --component-dark-widget-email-badge-text: var(--color-dark-text-contrast); /** Dark: Email widget badge text. White on mid-teal. */
  --component-dark-widget-news-badge-text: var(--color-dark-text-contrast); /** Dark: News widget badge text. */
  --component-dark-card-action-background: linear-gradient(0deg, rgba(255,255,255,0.006) 0%, rgba(255,255,255,0) 100%), var(--color-dark-bg-1); /** Dark: Action card background. Dark surface with very subtle top-light gradient for depth. */
  --component-dark-message-list-item-background: var(--color-dark-bg-1); /** Dark: Message list item background. Uses bg-1 instead of bg-2 in dark mode. */
  --component-dark-message-list-item-border: var(--color-dark-border-default); /** Dark: Message list item border. */
  --component-dark-icon-primary: var(--color-dark-icon-primary); /** Dark: Icon primary fill. Light purple for dark surfaces. */
  --component-dark-icon-secondary: var(--color-dark-icon-secondary); /** Dark: Icon secondary fill. Medium purple for dark surfaces. */
  --component-dark-perm-picker-background: var(--color-dark-bg-1); /** Dark: Permission picker container background. Dark surface 1. */
  --component-dark-perm-picker-option-background: var(--color-dark-bg-1); /** Dark: Permission option background. Matches container. */
  --component-dark-perm-picker-option-selected-background: var(--color-dark-bg-1); /** Dark: Selected permission option background. Same as default — selection shown via radio indicator. */
  --component-chip-border: var(--color-brand-primary); /** Chip border. Selected/active chip ring. Always brand primary. */
  --component-chip-selected-bg: var(--color-brand-primary); /** Chip selected background. Filled brand primary when chip is active/selected. */
  --component-chip-selected-text: var(--color-text-contrast); /** Chip selected text. White text on filled primary chip. */
  --component-bubble-user-background: var(--color-brand-primary); /** User chat bubble background. Brand primary — clearly distinguishes the user's own messages. */
  --component-bubble-user-text: var(--color-text-contrast); /** User chat bubble text. White on brand primary background. */
  --component-bubble-agent-background: var(--color-bg-2); /** Agent chat bubble background. Subtle off-white — calm, non-intrusive. Continua's presence is quiet. */
  --component-bubble-agent-text: var(--color-text-primary); /** Agent chat bubble text. Primary text color. */
  --component-bubble-social-background: var(--color-brand-primary-subtle); /** Social/group chat bubble background. Very light lavender — distinguishes group messages from user and agent. */
  --component-bubble-social-text: var(--color-text-primary); /** Social chat bubble text. Primary text color. */
  --component-bubble-action-inline-background: var(--color-bg-0); /** Inline action bubble background. White card inside agent bubble. */
  --component-bubble-action-inline-border: var(--color-brand-primary); /** Inline action bubble border. Brand primary ring around agent action cards. */
  --component-widget-weather-background: var(--color-bg-4); /** Weather widget background. Mid-light neutral — weather data needs low visual competition. */
  --component-widget-weather-badge-background: var(--color-brand-primary); /** Weather widget badge background. Brand primary on neutral widget. */
  --component-widget-weather-badge-text: var(--color-text-contrast); /** Weather widget badge text. White on brand primary. */
  --component-widget-flight-background: var(--color-secondary-blue-light); /** Flight widget background. Pale blue — sky/travel association. */
  --component-widget-flight-badge-text: var(--color-text-contrast); /** Flight widget badge text. White on deep blue. */
  --component-widget-calendar-badge-text: var(--color-text-contrast); /** Calendar widget badge text. White on forest green. */
  --component-widget-email-badge-text: var(--color-text-contrast); /** Email widget badge text. White on amber. */
  --component-widget-news-badge-text: var(--color-text-contrast); /** News widget badge text. White on deep purple. */
  --component-card-background: var(--color-bg-0); /** Card background. White surface — primary content card. */
  --component-card-border: var(--color-border-light); /** Card border. Subtle edge definition. */
  --component-card-action-background: var(--color-bg-1); /** Action card background. Slightly off-white — action cards sit slightly below primary cards. */
  --component-card-action-border: var(--color-border-default); /** Action card border. Standard separator edge. */
  --component-nav-border: var(--color-border-default); /** Navigation bar bottom border. */
  --component-tab-bar-active-color: var(--color-brand-primary); /** Tab bar active icon/label. Brand primary on active tab. */
  --component-tab-bar-inactive-color: var(--color-text-tertiary); /** Tab bar inactive icon/label. Tertiary text for unselected tabs. */
  --component-input-background: var(--color-bg-2); /** Text input background. Subtle tint — distinguishes input from surrounding surface without heavy border. */
  --component-input-text: var(--color-text-primary); /** Text input entered text. */
  --component-input-placeholder: var(--color-text-tertiary); /** Text input placeholder text. Tertiary — clearly not user content. */
  --component-input-border: var(--color-border-light); /** Text input border. Light edge definition. */
  --component-input-border-focus: var(--color-brand-primary); /** Text input focused border. Brand primary ring when input is active. */
  --component-message-list-item-background: var(--color-bg-2); /** Message list item background. Matches app surface — items blend into list naturally. */
  --component-message-list-item-border: var(--color-border-default); /** Message list item bottom border/divider. */
  --component-signin-background: var(--color-brand-primary); /** Sign-in screen background. Full brand primary — high-impact first impression. The one full-color screen. */
  --component-home-bar-background: var(--color-text-primary); /** Home bar (swipe indicator) color. Matches primary text in light mode. */
  --component-icon-primary: var(--color-icon-primary); /** Icon primary fill. Main SVG color — outlines, single-color icons. */
  --component-icon-secondary: var(--color-icon-secondary); /** Icon secondary fill. Dual-color icon interior. Lighter complement to primary. */
  --component-button-primary-background: var(--color-brand-primary); /** Primary button background. Brand primary fill. */
  --component-button-primary-text: var(--color-text-contrast); /** Primary button text. White on brand primary. */
  --component-button-primary-hover-bg: var(--color-brand-primary-dark); /** Primary button hover background. Darkened primary. */
  --component-button-secondary-border: var(--color-brand-primary); /** Secondary button border. */
  --component-button-secondary-text: var(--color-brand-primary); /** Secondary button text. */
  --component-button-ghost-text: var(--color-brand-primary); /** Ghost button text. Brand primary text. */
  --component-button-destructive-text: var(--color-text-contrast); /** Destructive button text. White on danger fill. */
  --component-badge-text: var(--color-text-contrast); /** Badge text. White count on danger background. */
  --component-toast-background: var(--color-bg-surface); /** Toast notification background. Surface white. */
  --component-toast-border: var(--color-border-default); /** Toast notification border. */
  --component-toast-text: var(--color-text-primary); /** Toast notification text. */
  --component-toggle-track-on: var(--color-brand-primary); /** Toggle track — on state. Brand primary fill. */
  --component-toggle-track-off: var(--color-bg-4); /** Toggle track — off state. Neutral gray fill. */
  --component-toggle-thumb: var(--color-bg-0); /** Toggle thumb. Always white circle. */
  --component-presence-online: var(--color-accent-green); /** Presence online indicator. Neon green dot — active now. */
  --component-presence-away: var(--color-accent-yellow); /** Presence away indicator. Yellow — present but inactive. */
  --component-presence-offline: var(--color-text-disabled); /** Presence offline indicator. Disabled gray — not connected. */
  --component-skeleton-base: var(--color-bg-3); /** Skeleton loader base color. Mid-light neutral. */
  --component-skeleton-highlight: var(--color-bg-1); /** Skeleton loader shimmer highlight. Near-white sweep. */
  --component-privacy-notice-background: var(--color-brand-primary-lighter); /** Privacy notice banner background. Soft brand tint — signals this is a Continua system message, not a chat. */
  --component-privacy-notice-text: var(--color-brand-primary-dark); /** Privacy notice text. Deep brand color for legibility and brand cohesion. */
  --component-privacy-notice-icon: var(--color-brand-primary); /** Privacy notice icon. Brand primary lock/shield icon. */
  --component-perm-picker-background: var(--color-bg-2); /** Permission picker container background. Same as agent bubble — the picker reads as part of the agent response. */
  --component-perm-picker-option-background: var(--color-bg-2); /** Individual permission option card background. Matches container so items read as a unified stack. */
  --component-perm-picker-option-selected-background: var(--color-bg-2); /** Selected permission option background (same as default — selection is communicated via the radio indicator, not fill). */
  --color-debug-accent: var(--color-brand-primary); /** Debug accent. Highlights and active states within debug panel. */
}