/* Centralized design tokens — original Relayzo blue-purple palette */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

:root {
  --background: oklch(1.0000 0 0);
  --foreground: oklch(0.1450 0 0);
  --card: oklch(1.0000 0 0);
  --card-foreground: oklch(0.1450 0 0);
  --popover: oklch(1.0000 0 0);
  --popover-foreground: oklch(0.1450 0 0);
  --primary: oklch(0.5500 0.2400 280.0000);
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.9670 0.0029 264.5419);
  --secondary-foreground: oklch(0.4461 0.0263 256.8018);
  --muted: oklch(0.9846 0.0017 247.8389);
  --muted-foreground: oklch(0.5510 0.0234 264.3637);
  --accent: oklch(0.9300 0.0500 280.0000);
  --accent-foreground: oklch(0.4000 0.1200 280.0000);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.9276 0.0058 264.5313);
  --input: oklch(0.9276 0.0058 264.5313);
  --ring: oklch(0.5500 0.2400 280.0000);
  --chart-1: oklch(0.5500 0.2400 280.0000);
  --chart-2: oklch(0.6000 0.2000 200.0000);
  --chart-3: oklch(0.6000 0.2000 160.0000);
  --chart-4: oklch(0.5500 0.2000 40.0000);
  --chart-5: oklch(0.5000 0.2000 320.0000);
  --sidebar: oklch(0.9846 0.0017 247.8389);
  --sidebar-foreground: oklch(0.1450 0 0);
  --sidebar-primary: oklch(0.5500 0.2400 280.0000);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent: oklch(0.9300 0.0500 280.0000);
  --sidebar-accent-foreground: oklch(0.4000 0.1200 280.0000);
  --sidebar-border: oklch(0.9276 0.0058 264.5313);
  --sidebar-ring: oklch(0.5500 0.2400 280.0000);
  --font-sans: Poppins, sans-serif;
  --font-serif: Poppins, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --radius: 0.375rem;
  --shadow-x: 0px;
  --shadow-y: 4px;
  --shadow-blur: 8px;
  --shadow-spread: -1px;
  --shadow-opacity: 0.1;
  --shadow-color: hsl(0 0% 0%);
  --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
  --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  --primary-color: var(--primary);
  --default-border: var(--border);
  --default-text-color: var(--foreground);
  --text-muted: var(--muted-foreground);
  --input-border: var(--input);
  --form-control-bg: var(--background);
  --light-rgb: 240, 240, 240;

  --bs-body-bg: var(--background);
  --bs-body-color: var(--foreground);
  --bs-border-color: var(--border);
  --bs-secondary-bg: var(--secondary);
  --bs-tertiary-bg: var(--muted);
  --bs-primary: var(--primary);
  --bs-secondary: var(--secondary-foreground);
  --bs-success: var(--chart-2);
  --bs-info: var(--chart-1);
  --bs-warning: var(--chart-3);
  --bs-danger: var(--destructive);
  --bs-light: var(--accent);
  --bs-dark: var(--foreground);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--accent-foreground);
  --bs-primary-rgb: 118, 71, 229;
  --bs-secondary-rgb: 104, 108, 124;
  --bs-success-rgb: 33, 206, 158;
  --bs-info-rgb: 14, 165, 232;
  --bs-warning-rgb: 255, 198, 88;
  --bs-danger-rgb: 251, 66, 66;
}

.dark,
html[data-theme-mode="dark"] {
  --background: oklch(0.2046 0 0);
  --foreground: oklch(0.9219 0 0);
  --card: oklch(0.2686 0 0);
  --card-foreground: oklch(0.9219 0 0);
  --popover: oklch(0.2686 0 0);
  --popover-foreground: oklch(0.9219 0 0);
  --primary: oklch(0.6200 0.2200 280.0000);
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.2686 0 0);
  --secondary-foreground: oklch(0.9219 0 0);
  --muted: oklch(0.2393 0 0);
  --muted-foreground: oklch(0.7155 0 0);
  --accent: oklch(0.4000 0.1200 280.0000);
  --accent-foreground: oklch(0.9243 0.0800 280.0000);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.3715 0 0);
  --input: oklch(0.3715 0 0);
  --ring: oklch(0.6200 0.2200 280.0000);
  --chart-1: oklch(0.7000 0.1800 280.0000);
  --chart-2: oklch(0.6500 0.1700 200.0000);
  --chart-3: oklch(0.4000 0.1200 280.0000);
  --chart-4: oklch(0.6000 0.2000 160.0000);
  --chart-5: oklch(0.4000 0.1200 280.0000);
  --sidebar: oklch(0.1684 0 0);
  --sidebar-foreground: oklch(0.9219 0 0);
  --sidebar-primary: oklch(0.6200 0.2200 280.0000);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent: oklch(0.4000 0.1200 280.0000);
  --sidebar-accent-foreground: oklch(0.9243 0.0800 280.0000);
  --sidebar-border: oklch(0.3715 0 0);
  --sidebar-ring: oklch(0.6200 0.2200 280.0000);

  --primary-color: var(--primary);
  --default-border: var(--border);
  --default-text-color: var(--foreground);
  --text-muted: var(--muted-foreground);
  --input-border: var(--input);
  --form-control-bg: var(--background);
  --light-rgb: 62, 62, 62;

  --bs-body-bg: var(--background);
  --bs-body-color: var(--foreground);
  --bs-border-color: var(--border);
  --bs-secondary-bg: var(--secondary);
  --bs-tertiary-bg: var(--muted);
  --bs-primary: var(--primary);
  --bs-secondary: var(--secondary-foreground);
  --bs-success: var(--chart-2);
  --bs-info: var(--chart-1);
  --bs-warning: var(--chart-3);
  --bs-danger: var(--destructive);
  --bs-light: var(--accent);
  --bs-dark: var(--foreground);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--accent-foreground);
}

* {
  border-color: var(--border);
  outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
}

html,
body {
  background-color: var(--background) !important;
  color: var(--foreground) !important;
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-normal);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-sans);
}

code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
}

.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.navbar,
.list-group-item,
.table,
.form-control,
.form-select,
.input-group-text,
.accordion-item,
.popover,
.tooltip-inner {
  border-color: var(--border) !important;
}

.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.popover {
  background-color: var(--card) !important;
  color: var(--card-foreground) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
}

.form-control,
.form-select,
.input-group-text,
.btn {
  border-radius: var(--radius) !important;
}

.form-control,
.form-select,
.input-group-text {
  background-color: var(--background) !important;
  color: var(--foreground) !important;
  border-color: var(--input) !important;
}

.form-control:focus,
.form-select:focus,
.btn:focus,
.btn:focus-visible {
  box-shadow: 0 0 0 0.2rem color-mix(in oklab, var(--ring) 35%, transparent) !important;
  border-color: var(--ring) !important;
}

.btn-primary,
.bg-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

.btn-outline-primary {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  color: var(--primary-foreground) !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.btn-light,
.bg-light {
  background-color: var(--accent) !important;
  border-color: var(--border) !important;
  color: var(--accent-foreground) !important;
}

.btn-dark,
.bg-dark {
  background-color: var(--foreground) !important;
  border-color: var(--foreground) !important;
  color: var(--background) !important;
}

.btn-success,
.bg-success {
  background-color: var(--chart-2) !important;
  border-color: var(--chart-2) !important;
  color: var(--primary-foreground) !important;
}

.btn-info,
.bg-info {
  background-color: var(--chart-1) !important;
  border-color: var(--chart-1) !important;
  color: var(--primary-foreground) !important;
}

.btn-warning,
.bg-warning {
  background-color: var(--chart-3) !important;
  border-color: var(--chart-3) !important;
  color: var(--background) !important;
}

.btn-danger,
.bg-danger,
.alert-danger {
  background-color: var(--destructive) !important;
  border-color: var(--destructive) !important;
  color: var(--destructive-foreground) !important;
}

.text-primary {
  color: var(--primary) !important;
}

.text-secondary {
  color: var(--muted-foreground) !important;
}

.text-muted {
  color: var(--muted-foreground) !important;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
  border-color: var(--border) !important;
}

.table,
.table th,
.table td {
  color: var(--foreground);
}

.badge.text-bg-success {
  background-color: var(--chart-2) !important;
  color: var(--primary-foreground) !important;
}

.progress {
  background-color: color-mix(in oklab, var(--muted) 75%, var(--border));
}

.bg-white,
.bg-body,
.bg-body-tertiary {
  background-color: var(--card) !important;
  color: var(--card-foreground) !important;
}

.nav-link,
a {
  color: var(--foreground);
}

a:hover,
.nav-link:hover {
  color: var(--primary);
}

#modal .choices__list--dropdown .choices__item {
  border-bottom: 1px solid var(--border) !important;
}

#modal .choices__list--dropdown .choices__item--selectable.is-highlighted,
#modal .choices__list--multiple .choices__item {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

#modal .choices__list--multiple .choices__item .choices__button {
  border-left: 1px solid color-mix(in oklab, var(--primary-foreground) 30%, transparent) !important;
  color: var(--primary-foreground) !important;
}

#modal .choices__inner {
  border-color: var(--input) !important;
  background-color: var(--background) !important;
}

#modal .choices__input {
  color: var(--foreground) !important;
}