/**
 * Mitverse marketing theme — loaded after the app bundle to override tokens,
 * hardcoded blues in bundled gradients/shadows, and motion curves.
 */
:root {
  color-scheme: light;
  /* Core UI tokens (bundle maps --brand → --ui-color-*) */
  --ui-color-bg: #f3f6fb;
  --ui-color-surface: #ffffff;
  --ui-color-surface-subtle: #e8eef7;
  --ui-color-text: #0c1222;
  --ui-color-text-muted: #3d4f6f;
  --ui-color-text-subtle: #5c6d8c;
  --ui-color-border: rgba(12, 18, 34, 0.11);
  --ui-color-border-strong: rgba(12, 18, 34, 0.17);
  /* Teal–indigo “verse” spectrum */
  --ui-color-brand: #0d9488;
  --ui-color-brand-strong: #0f766e;
  --ui-color-brand-soft: rgba(13, 148, 136, 0.16);
  --ui-color-success: #059669;
  --ui-shadow-sm: 0 1px 2px rgba(12, 18, 34, 0.06);
  --ui-shadow-md: 0 14px 36px rgba(12, 18, 34, 0.11);
  --ui-motion-fast: 0.12s;
  --ui-motion-base: 0.2s;
  --ui-motion-slow: 0.34s;
  --ui-motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ui-motion-ease-emphasis: cubic-bezier(0.22, 1, 0.32, 1);
  --ui-page-glow-a: rgba(13, 148, 136, 0.14);
  --ui-page-glow-b: rgba(99, 102, 241, 0.1);
  --ui-page-glow-c: rgba(14, 165, 233, 0.06);
  --ui-page-gradient-top: #f3f6fb;
  --ui-page-gradient-mid: #fafcfe;
  --ui-page-gradient-bottom: #ffffff;
  --ui-scroll-mask: rgba(243, 246, 251, 0.94);
}

:root[data-theme='dark'] {
  color-scheme: dark;
  /* Obsidian theme — aligned with mail.mitverse.com */
  --ui-color-bg: #070609;
  --ui-color-surface: #141219;
  --ui-color-surface-subtle: #0e0c10;
  --ui-color-text: #f1f5f9;
  --ui-color-text-muted: #94a3b8;
  --ui-color-text-subtle: #64748b;
  --ui-color-border: rgba(148, 163, 184, 0.12);
  --ui-color-border-strong: rgba(148, 163, 184, 0.22);
  --ui-color-brand: #0d9488;
  --ui-color-brand-strong: #0f766e;
  --ui-color-brand-soft: rgba(13, 148, 136, 0.12);
  --ui-color-success: #10b981;
  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --ui-shadow-md: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --ui-page-glow-a: rgba(13, 148, 136, 0.12);
  --ui-page-glow-b: rgba(217, 119, 6, 0.15);
  --ui-page-glow-c: rgba(13, 148, 136, 0.1);
  --ui-page-gradient-top: #070609;
  --ui-page-gradient-mid: #0e0c10;
  --ui-page-gradient-bottom: #141219;
  --ui-scroll-mask: rgba(7, 6, 9, 0.94);
}

:root {
  --motion-micro-fast: var(--ui-motion-fast);
  --motion-micro-base: var(--ui-motion-base);
  --motion-micro-slow: var(--ui-motion-slow);
  --motion-medium: 0.48s;
  --motion-page-enter: 0.58s;
  --motion-page-enter-fast: 0.42s;
  --motion-micro-ease: var(--ui-motion-ease);
  --motion-micro-ease-emphasized: var(--ui-motion-ease-emphasis);
  --motion-micro-lift: translate3d(0, -2px, 0) scale(1.01);
  --motion-micro-press: translate3d(0, 0, 0) scale(0.99);
  --motion-scroll-duration: 0.64s;
}

body {
  background: var(--bg);
}

/* Ambient mesh behind scrollable pages */
.landing-page,
.service-detail-page {
  background:
    radial-gradient(980px 520px at 12% -8%, var(--ui-page-glow-a), transparent 58%),
    radial-gradient(840px 480px at 88% 6%, var(--ui-page-glow-b), transparent 52%),
    radial-gradient(700px 400px at 50% 100%, var(--ui-page-glow-c), transparent 55%),
    linear-gradient(
      180deg,
      var(--ui-page-gradient-top) 0%,
      var(--ui-page-gradient-mid) 45%,
      var(--ui-page-gradient-bottom) 100%
    ) !important;
}

.site-header {
  background: color-mix(in srgb, var(--ui-color-surface) 88%, transparent);
  border-bottom-color: var(--border);
}

.site-header.site-header-compact,
.site-header:focus-within {
  box-shadow: var(--ui-shadow-md);
}

.hero-badge {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.stat-item {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}

.theme-switcher {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.btn-secondary,
.ui-button--secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}

.service-card,
.feature-card,
.impact-item,
.cta-content,
.footer,
.service-detail-diagram {
  background: var(--surface);
}

.service-card-external {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}

.features {
  background: var(--surface-2);
}

.cta {
  background:
    radial-gradient(800px 400px at 10% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%),
    radial-gradient(800px 400px at 90% 100%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 55%),
    linear-gradient(var(--surface-2), var(--surface-2));
}

/* Bundled primary hover glows */
.btn-primary:hover:not(:disabled):not([aria-disabled='true']) {
  box-shadow: 0 16px 36px color-mix(in srgb, var(--brand) 35%, transparent);
}

.ui-button--primary:hover:not(:disabled):not([aria-disabled='true']) {
  box-shadow: 0 16px 36px color-mix(in srgb, var(--brand) 35%, transparent);
}

.landing-scroll-mask.top {
  background: linear-gradient(to bottom, var(--ui-scroll-mask), transparent);
}

.landing-scroll-mask.bottom {
  background: linear-gradient(to top, var(--ui-scroll-mask), transparent);
}

.landing-scroll-button {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

:root[data-theme='dark'] .service-card,
:root[data-theme='dark'] .feature-card,
:root[data-theme='dark'] .impact-item,
:root[data-theme='dark'] .cta-content,
:root[data-theme='dark'] .footer,
:root[data-theme='dark'] .service-detail-diagram,
:root[data-theme='dark'] .hero-badge,
:root[data-theme='dark'] .stat-item {
  background: #141219;
  border-color: rgba(148, 163, 184, 0.12);
}

:root[data-theme='dark'] .features {
  background: #0e0c10;
  border-color: rgba(148, 163, 184, 0.12);
}

:root[data-theme='dark'] .service-card-external {
  background: linear-gradient(180deg, #141219, #1a1721);
}

:root[data-theme='dark'] .service-card:hover,
:root[data-theme='dark'] .service-card:focus-within {
  background: color-mix(in srgb, #141219 88%, rgba(13, 148, 136, 0.12));
  border-color: rgba(13, 148, 136, 0.28);
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.45);
}

:root[data-theme='dark'] .site-header.site-header-compact,
:root[data-theme='dark'] .site-header:focus-within {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-page-enter: 0.01ms;
    --motion-page-enter-fast: 0.01ms;
    --motion-scroll-duration: 0.01ms;
    --motion-micro-lift: translate3d(0, 0, 0);
    --motion-micro-press: translate3d(0, 0, 0);
  }
}