:root {
  /* -- Colors: Primary -- */
  --um-color-primary:           #5B2E91;
  --um-color-primary-light:     #7E52B3;
  --um-color-primary-dark:      #3D1A66;

  /* -- Colors: Accent -- */
  --um-color-accent:            #E8722A;
  --um-color-accent-light:      #F09456;
  --um-color-accent-dark:       #C95F1E;
  --um-color-accent-strong:     #B55418;

  /* -- Colors: Semantic -- */
  --um-color-success:           #276749;
  --um-color-error:             #C62828;
  --um-color-warning:           #7A4E00;
  --um-color-info:              #5B2E91;

  /* -- Colors: Neutrals -- */
  --um-color-midnight:          #1A1033;
  --um-color-text:              #1A1033;
  --um-color-text-primary:      var(--um-color-text);
  --um-color-text-secondary:    #6B6378;
  --um-color-text-tertiary:     #9E95A9;
  --um-color-label:             #5B2E91;
  --um-color-border:            #D1C4E9;
  --um-color-border-light:      #E8DFF5;

  /* -- Colors: Backgrounds -- */
  --um-color-bg-page:           #F7F5FA;
  --um-color-background:        var(--um-color-bg-page);
  --um-color-bg-surface:        #FFFFFF;
  --um-color-surface:           var(--um-color-bg-surface);
  --um-color-bg-lavender:       #E8DFF5;
  --um-color-bg-peach:          #FFF0E5;
  --um-color-bg-elevated:       #FFFFFF;
  --um-color-surface-secondary: color-mix(in srgb, var(--um-color-bg-surface) 84%, var(--um-color-bg-page));
  --um-color-on-brand:          #FFFFFF;
  --um-color-on-brand-muted:    rgba(255, 255, 255, 0.72);
  --um-color-on-brand-subtle:   rgba(255, 255, 255, 0.6);

  /* -- Typography -- */
  --um-font-heading:            'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --um-font-body:               'Inter', system-ui, -apple-system, sans-serif;
  --um-font-mono:               'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* -- Type Scale (1.25 ratio, 16px base) -- */
  --um-text-display:            2.5rem;
  --um-text-h1:                 2rem;
  --um-text-h2:                 1.5rem;
  --um-text-h3:                 1.25rem;
  --um-text-body:               1rem;
  --um-text-small:              0.875rem;
  --um-text-caption:            0.75rem;
  --um-text-overline:           0.6875rem;

  /* -- Font Weights -- */
  --um-weight-regular:          400;
  --um-weight-medium:           500;
  --um-weight-semibold:         600;
  --um-weight-bold:             700;
  --um-weight-extrabold:        800;

  /* -- Line Heights -- */
  --um-leading-tight:           1.2;
  --um-leading-snug:            1.3;
  --um-leading-normal:          1.5;
  --um-leading-relaxed:         1.6;
  --um-leading-loose:           1.7;

  /* -- Letter Spacing -- */
  --um-tracking-tight:          -0.02em;
  --um-tracking-normal:         0;
  --um-tracking-wide:           0.01em;
  --um-tracking-wider:          0.02em;
  --um-tracking-widest:         0.08em;

  /* -- Spacing (4px base unit) -- */
  --um-space-1:                 0.25rem;
  --um-space-2:                 0.5rem;
  --um-space-3:                 0.75rem;
  --um-space-4:                 1rem;
  --um-space-5:                 1.25rem;
  --um-space-6:                 1.5rem;
  --um-space-7:                 1.75rem;
  --um-space-8:                 2rem;
  --um-space-10:                2.5rem;
  --um-space-12:                3rem;
  --um-space-16:                4rem;

  /* -- Border Radius -- */
  --um-radius-sm:               6px;
  --um-radius-md:               8px;
  --um-radius-lg:               14px;
  --um-radius-xl:               20px;
  --um-radius-full:             9999px;

  /* -- Shadows -- */
  --um-shadow-xs:               0 1px 2px rgba(91, 46, 145, 0.04);
  --um-shadow-sm:               0 1px 4px rgba(91, 46, 145, 0.06);
  --um-shadow-card:             0 2px 8px rgba(91, 46, 145, 0.08);
  --um-shadow-dropdown:         0 4px 12px rgba(91, 46, 145, 0.10);
  --um-shadow-modal:            0 4px 16px rgba(91, 46, 145, 0.12);
  --um-shadow-elevated:         0 8px 32px rgba(91, 46, 145, 0.16);

  /* -- Transitions -- */
  --um-transition-fast:         150ms ease-in-out;
  --um-transition-normal:       250ms cubic-bezier(0.4, 0.0, 0.2, 1);
  --um-transition-slow:         400ms cubic-bezier(0.4, 0.0, 0.2, 1);

  /* -- Z-Index Scale -- */
  --um-z-dropdown:              100;
  --um-z-sticky:                200;
  --um-z-modal-backdrop:        300;
  --um-z-modal:                 400;
  --um-z-toast:                 500;

  /* -- Theme Runtime -- */
  color-scheme: light;
  --um-color-shell-topbar:      rgba(255, 255, 255, 0.9);
  --um-color-message-thread-top: rgba(247, 245, 250, 0.85);
  --um-color-message-thread-bottom: rgba(255, 255, 255, 0.94);
}

:root[data-theme="dark"] {
  --um-color-primary:           #8C63C7;
  --um-color-primary-light:     #A983D8;
  --um-color-primary-dark:      #5B2E91;

  --um-color-accent:            #F09456;
  --um-color-accent-light:      #F4AE7E;
  --um-color-accent-dark:       #D66E2E;
  --um-color-accent-strong:     #E47A37;

  --um-color-success:           #4E9A74;
  --um-color-error:             #EF5350;
  --um-color-warning:           #D9A441;
  --um-color-info:              #8C63C7;

  --um-color-midnight:          #0F0A1F;
  --um-color-text:              #F4EFFD;
  --um-color-text-primary:      var(--um-color-text);
  --um-color-text-secondary:    #C2B7D8;
  --um-color-text-tertiary:     #9389AA;
  --um-color-label:             #A98AD6;
  --um-color-border:            #403657;
  --um-color-border-light:      #2D2443;

  --um-color-bg-page:           #110A23;
  --um-color-background:        var(--um-color-bg-page);
  --um-color-bg-surface:        #1B1432;
  --um-color-surface:           var(--um-color-bg-surface);
  --um-color-bg-lavender:       #261D42;
  --um-color-bg-peach:          #33231E;
  --um-color-bg-elevated:       #231A3D;
  --um-color-surface-secondary: color-mix(in srgb, var(--um-color-bg-elevated) 82%, var(--um-color-bg-page));
  --um-color-on-brand:          #FFFFFF;
  --um-color-on-brand-muted:    rgba(255, 255, 255, 0.72);
  --um-color-on-brand-subtle:   rgba(255, 255, 255, 0.6);

  --um-shadow-xs:               0 1px 2px rgba(0, 0, 0, 0.24);
  --um-shadow-sm:               0 1px 4px rgba(0, 0, 0, 0.26);
  --um-shadow-card:             0 6px 20px rgba(0, 0, 0, 0.24);
  --um-shadow-dropdown:         0 12px 28px rgba(0, 0, 0, 0.28);
  --um-shadow-modal:            0 18px 36px rgba(0, 0, 0, 0.34);
  --um-shadow-elevated:         0 24px 48px rgba(0, 0, 0, 0.38);

  color-scheme: dark;
  --um-color-shell-topbar:      rgba(17, 10, 35, 0.86);
  --um-color-message-thread-top: rgba(17, 10, 35, 0.92);
  --um-color-message-thread-bottom: rgba(27, 20, 50, 0.96);
}

:root[data-theme="dark"] .marketing-nav {
  border-bottom-color: var(--um-color-border);
}

:root[data-theme="dark"] .marketing-nav .nav-lang__select {
  color-scheme: dark;
}