:root {
  --hapool-indigo: #4f46e5;
  --hapool-violet: #7c3aed;
  --hapool-cyan: #06b6d4;
  --hapool-emerald: #10b981;
  --hapool-gradient: linear-gradient(118deg, var(--hapool-indigo) 0%, var(--hapool-violet) 24%, var(--hapool-cyan) 58%, var(--hapool-emerald) 100%);
  --primary: oklch(0.68 0.17 195);
  --primary-foreground: oklch(1 0 0);
  --ring: oklch(0.67 0.18 230);
  --chart-1: oklch(0.62 0.22 278);
  --chart-2: oklch(0.72 0.16 210);
  --chart-3: oklch(0.72 0.17 162);
  --chart-4: oklch(0.65 0.2 305);
  --chart-5: oklch(0.77 0.14 185);
  --sidebar-primary: oklch(0.68 0.17 195);
  --sidebar-ring: oklch(0.67 0.18 230);
  --accent: color-mix(in oklch, var(--primary) 14%, var(--background, white));
  --sidebar-accent: color-mix(in oklch, var(--primary) 14%, var(--background, white));
}

.dark,
html[data-mode='dark'] {
  --primary: oklch(0.76 0.16 190);
  --primary-foreground: oklch(0.18 0.03 250);
  --ring: oklch(0.74 0.16 220);
  --sidebar-primary: oklch(0.76 0.16 190);
  --sidebar-ring: oklch(0.74 0.16 220);
}

html.hapool-mobius-theme body {
  background-image:
    radial-gradient(circle at 8% 2%, color-mix(in srgb, var(--hapool-violet) 12%, transparent) 0, transparent 30rem),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--hapool-emerald) 12%, transparent) 0, transparent 32rem),
    radial-gradient(circle at 54% 100%, color-mix(in srgb, var(--hapool-cyan) 8%, transparent) 0, transparent 36rem);
  background-attachment: fixed;
}

html.hapool-mobius-theme ::selection {
  color: white;
  background: var(--hapool-cyan);
}

html.hapool-mobius-theme :is(button, a)[class*='bg-primary'],
html.hapool-mobius-theme :is(button, a)[class*='gradient'] {
  border-color: color-mix(in srgb, var(--hapool-cyan) 45%, transparent);
  background-image: var(--hapool-gradient) !important;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--hapool-cyan) 20%, transparent);
}

html.hapool-mobius-theme [class*='bg-gradient-to-'],
html.hapool-mobius-theme [class*='from-blue-'],
html.hapool-mobius-theme [class*='from-purple-'],
html.hapool-mobius-theme [class*='from-violet-'],
html.hapool-mobius-theme [class*='from-amber-'] {
  --tw-gradient-from: var(--hapool-indigo) var(--tw-gradient-from-position) !important;
  --tw-gradient-via: var(--hapool-cyan) var(--tw-gradient-via-position) !important;
  --tw-gradient-to: var(--hapool-emerald) var(--tw-gradient-to-position) !important;
}

html.hapool-mobius-theme :is(header, nav, aside) {
  border-color: color-mix(in srgb, var(--hapool-cyan) 16%, currentColor);
}

html.hapool-mobius-theme :is([class*='card'], [class*='Card']) {
  border-color: color-mix(in srgb, var(--hapool-cyan) 14%, transparent);
}

html.hapool-mobius-theme .hapool-brand-logo {
  width: auto !important;
  min-width: 2rem;
  max-width: 9rem;
  height: 2.5rem !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 5px 12px color-mix(in srgb, var(--hapool-cyan) 25%, transparent));
}

html.hapool-mobius-theme .hapool-wordmark {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
}

html.hapool-mobius-theme .hapool-wordmark-logo {
  display: inline-block !important;
  width: 1.65rem !important;
  height: 1.65rem !important;
  flex: 0 0 1.65rem !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--hapool-cyan) 24%, transparent));
}

html.hapool-mobius-theme #splash .hapool-brand-logo {
  width: 8rem !important;
  height: 8rem !important;
}

html.hapool-mobius-theme .hapool-hidden-source-link {
  display: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  html.hapool-mobius-theme :is(button, a, [class*='card']) {
    transition-property: color, background-color, border-color, box-shadow, transform;
    transition-duration: 180ms;
  }
}