:root {
  color-scheme: light;
  --ol-color-violet-400: #A673E8;
  --ol-color-violet-500: #8B45DE;
  --ol-color-violet-600: #7432C4;
  --ol-color-indigo-50: #F3F1FD;
  --ol-color-indigo-100: #E7E3FB;
  --ol-color-indigo-200: #CFC7F6;
  --ol-color-indigo-300: #AD9FEE;
  --ol-color-indigo-400: #8670E3;
  --ol-color-indigo-500: #6A4FD9;
  --ol-color-indigo-600: #5236CF;
  --ol-color-indigo-700: #4229AF;
  --ol-color-indigo-800: #35228C;
  --ol-color-indigo-900: #2A1D6E;
  --ol-color-indigo-950: #1A1245;
  --ol-color-blue-50: #EEF2FE;
  --ol-color-blue-100: #DBE3FD;
  --ol-color-blue-400: #6D8DF5;
  --ol-color-blue-500: #3A66F1;
  --ol-color-blue-600: #0D43EE;
  --ol-color-blue-700: #0A36BF;
  --ol-color-blue-800: #082A93;
  --ol-color-neutral-0: #FFFFFF;
  --ol-color-neutral-50: #F4F5FB;
  --ol-color-neutral-100: #E9EBF3;
  --ol-color-neutral-200: #D6D9E4;
  --ol-color-neutral-300: #B7BCCB;
  --ol-color-neutral-400: #9198AA;
  --ol-color-neutral-500: #6B7280;
  --ol-color-neutral-600: #525A6B;
  --ol-color-neutral-700: #3A4152;
  --ol-color-neutral-800: #222939;
  --ol-color-neutral-900: #151B2B;
  --ol-color-neutral-950: #0B1222;
  --ol-color-green-100: #DCF5EA;
  --ol-color-green-600: #12805C;
  --ol-color-amber-100: #FDF0DC;
  --ol-color-amber-600: #B45309;
  --ol-color-red-100: #FCE4E7;
  --ol-color-red-600: #C2283C;

  --ol-brand-agent-violet: var(--ol-color-violet-500);
  --ol-brand-core-indigo: var(--ol-color-indigo-600);
  --ol-brand-deep-blue: #2A2BC0;
  --ol-brand-ink-navy: var(--ol-color-neutral-950);
  --ol-brand-slate: var(--ol-color-neutral-500);
  --ol-brand-mist: var(--ol-color-neutral-50);
  --ol-gradient-signature: linear-gradient(225deg, #8B45DE 0%, #5236CF 55%, #2A2BC0 100%);

  --ol-bg-canvas: var(--ol-color-neutral-0);
  --ol-bg-subtle: var(--ol-color-neutral-50);
  --ol-bg-muted: var(--ol-color-neutral-100);
  --ol-bg-inverse: var(--ol-color-neutral-950);
  --ol-bg-inverse-raised: var(--ol-color-neutral-800);
  --ol-bg-brand: var(--ol-color-blue-600);
  --ol-bg-brand-subtle: var(--ol-color-blue-50);
  --ol-text-primary: var(--ol-color-neutral-950);
  --ol-text-secondary: var(--ol-color-neutral-600);
  --ol-text-muted: var(--ol-color-neutral-400);
  --ol-text-inverse: var(--ol-color-neutral-0);
  --ol-text-brand: var(--ol-color-blue-600);
  --ol-text-link: var(--ol-color-blue-600);
  --ol-text-link-hover: var(--ol-color-blue-700);
  --ol-text-on-brand: var(--ol-color-neutral-0);
  --ol-border-default: var(--ol-color-neutral-200);
  --ol-border-strong: var(--ol-color-neutral-300);
  --ol-border-brand: var(--ol-color-blue-600);
  --ol-border-focus: var(--ol-color-blue-500);
  --ol-action-primary: var(--ol-color-blue-600);
  --ol-action-primary-hover: var(--ol-color-blue-700);
  --ol-action-primary-active: var(--ol-color-blue-800);
  --ol-action-secondary: var(--ol-color-neutral-950);
  --ol-action-secondary-hover: var(--ol-color-neutral-800);
  --ol-action-ghost-hover: var(--ol-color-blue-50);
  --ol-status-success: var(--ol-color-green-600);
  --ol-status-success-bg: var(--ol-color-green-100);
  --ol-status-warning: var(--ol-color-amber-600);
  --ol-status-warning-bg: var(--ol-color-amber-100);
  --ol-status-danger: var(--ol-color-red-600);
  --ol-status-danger-bg: var(--ol-color-red-100);
  --ol-status-info: var(--ol-color-blue-600);
  --ol-status-info-bg: var(--ol-color-blue-50);

  --color-slate-50: var(--ol-bg-subtle);
  --color-slate-200: var(--ol-border-default);
  --color-slate-300: var(--ol-border-strong);
  --color-slate-800: var(--ol-color-neutral-800);
  --color-slate-950: var(--ol-text-primary);
  --color-theme-dark: var(--ol-bg-inverse-raised);
}

.bg-theme-dark {
  background-color: var(--ol-bg-inverse-raised);
  --color-red-500: var(--ol-status-danger);
  --color-green-600: var(--ol-status-success);
}

.bg-theme-dark .border-border-dark {
  border-color: color-mix(in srgb, var(--ol-color-neutral-0) 28%, transparent);
}

.btn-primary:hover,
.creative-hover-anim:not(:disabled):not([aria-disabled="true"]).btn-primary .hover-bg {
  background-color: var(--ol-action-primary-hover);
}

.btn-primary:active {
  background-color: var(--ol-action-primary-active);
}

.navbar .nav-link.active,
.navbar .mega-menu a.active {
  background-color: var(--ol-action-ghost-hover);
}

.ring-primary\/25 {
  --tw-ring-color: color-mix(in srgb, var(--ol-action-primary) 25%, transparent);
}

:is(input, textarea, select):focus {
  --tw-ring-color: var(--ol-border-focus);
}

:focus-visible {
  outline-color: var(--ol-border-focus);
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--ol-bg-subtle);
}

::-webkit-scrollbar-thumb {
  border: 3px solid var(--ol-bg-subtle);
  border-radius: 999px;
  background: var(--ol-action-primary);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  border-width: 2px;
  background: var(--ol-action-primary-hover);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
  background: var(--ol-action-primary-active);
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: var(--ol-bg-subtle);
}

/* Chromium ignores the ::-webkit-scrollbar styles above when scrollbar-color is set. */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: var(--ol-action-primary) var(--ol-bg-subtle);
    scrollbar-width: thin;
  }
}