@import "simplebar-react/dist/simplebar.min.css";

/* Design tokens exposed as Tailwind theme utilities and CSS variables. */
@theme {
  --color-brand: #6747c8;
  --color-danger: #ff004c;
  --color-info: #00b4d8;
  --color-success: #2a9d8f;
  --color-warning: #e9c46a;
  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-foreground: #34303d;
  --color-heading: #251a44;
  --color-muted: #9b98a3;
  --color-border: #d4dee8;
  --color-separator: #ebeef1;
  --color-shadow: oklch(0.85 0 0 / 0.5);
  --shadow-card: 0 0 8px var(--color-shadow);
  --color-outline: #dbd4e9;
  --color-outline-danger: #ffd6e1;
  --shadow-outline: 0 0 0 1px var(--color-border);
}

/* Runtime theme overrides toggled by the theme helpers. */
:root.dark {
  --color-background: #16141a;
  --color-surface: #1f1d24;
  --color-foreground: #9e99ad;
  --color-heading: #bfb8d1;
  --color-muted: #6c6877;
  --color-border: #292436;
  --color-separator: #221e2c;
  --color-shadow: oklch(0.6 0 0 / 0.15);
  --color-outline: #382f4a;
  --color-outline-danger: #5a1f2f;
}

/*
 * Keep this marker pair for scripts/validate-semantic-tokens.mjs.
 * This global focus rule intentionally uses CSS variables because it lives in
 * the package stylesheet rather than a component className.
 */
/* semantic-token-exception:start */
@layer base {
  :focus-visible {
    outline: 3px solid var(--color-outline);
    box-shadow: var(--shadow-outline);
    outline-offset: 1px;
  }
}
/* semantic-token-exception:end */

/* Shared by ThemeSwitch's animated moon icon. */
@keyframes tilt {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-20deg);
  }

  75% {
    transform: rotate(40deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* Keep host pages aligned with the package background token. */
body {
  background-color: var(--color-background);
}

/* Normalize placeholder color for native form controls. */
input::placeholder {
  color: var(--color-muted);
  font-weight: 400;
}

/* Progressive enhancement: older browsers keep the functional placeholder with normal text color. */
[data-ui-select-placeholder]:has(> option[value=""]:checked) {
  color: var(--color-muted);
}

/* Match SimpleBar's generated scrollbar thumb to the theme token. */
.simplebar-scrollbar:before {
  /* biome-ignore lint/complexity/noImportantStyles: required to override simplebar's inline styles */
  background: var(--color-muted) !important;
}