/* Odin Router blue theme override - injected by Nginx. */
:root {
  --color-brand-50: #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-200: #bfdbfe;
  --color-brand-300: #93c5fd;
  --color-brand-400: #60a5fa;
  --color-brand-500: #2563eb;
  --color-brand-600: #1d4ed8;
  --color-brand-700: #1e40af;
  --color-brand-800: #1e3a8a;
  --color-brand-900: #172554;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-bg: #f8fbff;
  --color-bg-alt: #eff6ff;
  --color-surface: #ffffff;
  --color-surface-2: #f1f5f9;
  --color-surface-3: #e2e8f0;
  --color-sidebar: rgba(248, 251, 255, 0.92);
  --color-border: #dbeafe;
  --color-border-subtle: #eaf2ff;
  --color-text: #0f172a;
  --color-text-main: #0f172a;
  --color-text-muted: #475569;
  --color-text-subtle: #94a3b8;
  --color-info: #2563eb;
  --shadow-soft: 0 2px 12px -3px rgba(37, 99, 235, 0.14);
  --shadow-warm: 0 2px 12px -2px rgba(37, 99, 235, 0.20);
  --shadow-elevated: 0 12px 28px -4px rgba(15, 23, 42, 0.08);
  --shadow-elev: inset 0 1px 0 0 rgba(255,255,255,.8), 0 1px 2px rgba(15,23,42,.04), 0 12px 36px -8px rgba(37,99,235,.18);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

:root.dark,
html.dark,
body.dark,
.dark {
  color-scheme: dark;
  --color-brand-50: #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-200: #bfdbfe;
  --color-brand-300: #93c5fd;
  --color-brand-400: #60a5fa;
  --color-brand-500: #2563eb;
  --color-brand-600: #3b82f6;
  --color-brand-700: #60a5fa;
  --color-brand-800: #93c5fd;
  --color-brand-900: #bfdbfe;
  --color-primary: #2563eb;
  --color-primary-hover: #60a5fa;
  --color-bg: #0f172a;
  --color-bg-alt: #111c33;
  --color-surface: #111c33;
  --color-surface-2: #172554;
  --color-surface-3: #1e3a8a;
  --color-sidebar: rgba(15, 23, 42, 0.92);
  --color-border: rgba(219, 234, 254, 0.22);
  --color-border-subtle: rgba(219, 234, 254, 0.14);
  --color-text: #f8fbff;
  --color-text-main: #f8fbff;
  --color-text-muted: #bfdbfe;
  --color-text-subtle: #93c5fd;
  --color-info: #60a5fa;
  --shadow-soft: 0 16px 36px -24px rgba(0, 0, 0, 0.85);
  --shadow-warm: 0 2px 12px -2px rgba(37, 99, 235, 0.34);
  --shadow-elevated: 0 20px 48px -28px rgba(0, 0, 0, 0.9);
  --shadow-elev: inset 0 1px 0 0 rgba(248, 251, 255, .07), 0 18px 44px -28px rgba(0, 0, 0, .95);
  --shadow-focus: 0 0 0 3px rgba(96, 165, 250, 0.28);
}

::selection {
  color: #1e3a8a;
  background-color: rgba(37, 99, 235, 0.18);
}

.dark ::selection {
  color: #dbeafe;
  background-color: rgba(59, 130, 246, 0.35);
}

input,
textarea {
  accent-color: var(--color-primary);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-primary);
}

.scroll-thin-x,
.dark .scroll-thin-x {
  scrollbar-color: rgba(37, 99, 235, 0.55) transparent;
}

.scroll-thin-x::-webkit-scrollbar-thumb,
.dark .scroll-thin-x::-webkit-scrollbar-thumb {
  background: rgba(37, 99, 235, 0.55);
}

.bg-vibrancy {
  background: rgba(255, 255, 255, 0.82);
}

.dark .bg-vibrancy {
  background: rgba(15, 23, 42, 0.78);
}

.bg-hero-gradient {
  background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
}

.dot-grid-bg {
  background-color: var(--color-bg);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(37, 99, 235, 0.12) 0, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(37, 99, 235, 0.08) 0, transparent 40%);
}

.dark .dot-grid-bg {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(59, 130, 246, 0.18) 0, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(37, 99, 235, 0.12) 0, transparent 40%);
}

.landing-grid {
  background-image:
    linear-gradient(to right, #2563eb 1px, transparent 1px),
    linear-gradient(to bottom, #2563eb 1px, transparent 1px);
  opacity: .06;
}

@keyframes border-glow {
  0%, to {
    border-color: rgba(37, 99, 235, .48);
    box-shadow: 0 0 5px rgba(37, 99, 235, .25), 0 0 10px rgba(37, 99, 235, .18);
  }
  50% {
    border-color: rgba(37, 99, 235, .75);
    box-shadow: 0 0 10px rgba(37, 99, 235, .45), 0 0 20px rgba(37, 99, 235, .28);
  }
}

@keyframes ctaGlowPulse {
  0%, to {
    box-shadow: 0 8px 24px -8px rgba(37, 99, 235, .44), 0 0 0 rgba(37, 99, 235, .44);
  }
  50% {
    box-shadow: 0 12px 32px -8px rgba(37, 99, 235, .56), 0 0 0 8px rgba(37, 99, 235, 0);
  }
}

.text-\[\#e56a4a\],
.text-brand-500,
.text-primary {
  color: #2563eb !important;
}

.bg-\[\#e56a4a\],
.bg-brand-500,
.bg-primary {
  background-color: #2563eb !important;
}

.border-\[\#e56a4a\],
.border-brand-500,
.border-primary {
  border-color: #2563eb !important;
}