/**
 * Base layer — minimal resets. Everything visual lives in tokens; components
 * style themselves inline against the CSS custom properties.
 */

:root {
  color-scheme: light;
}
[data-theme="dark"],
[data-theme="theme-b-dark"] {
  color-scheme: dark;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background-color: var(--bg-default);
  color: var(--text-default);
  font-family: var(--font-body);
  font-size: var(--size-md);
  line-height: var(--line-height-leading-6);
  letter-spacing: var(--letter-spacing-tracking-normal);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a {
  color: var(--text-informative);
  text-decoration: none;
}
a:hover {
  color: var(--border-highlight-accent);
  text-decoration: underline;
}

/* Shared component keyframes */
@keyframes blumn-spin {
  to { transform: rotate(360deg); }
}
@keyframes blumn-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes blumn-progress-indeterminate {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(150%); }
  100% { transform: translateX(-100%); }
}
@keyframes blumn-tooltip-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; }
}
@keyframes blumn-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes blumn-dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}