/* ═══════════════════════════════════════════════════════════════════
 * DESIGN TOKENS (from core package)
 * ═══════════════════════════════════════════════════════════════════ */
:root {
  /* Colors - Vanilla (warm neutrals) */
  --vanilla-100: #fdf9f3;

  /* Colors - Chocolate (rich browns) */
  --chocolate-500: #5c3d2e;
  --chocolate-800: #2e1d17;
  --chocolate-900: #1f1410;

  /* Light theme */
  --bg-base-light: var(--vanilla-100);
  --text-muted-light: var(--chocolate-500);

  /* Dark theme */
  --bg-base-dark: var(--chocolate-900);
  --text-muted-dark: #b89a82;

  /* Spinner config (size 'l' for page loading) */
  --spinner-size: 40px;
  --spinner-border-width: 3px;
}

/* ═══════════════════════════════════════════════════════════════════
 * RESET & BASE
 * ═══════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════
 * THEME BACKGROUNDS
 * ═══════════════════════════════════════════════════════════════════ */
.body.light {
  background-color: var(--bg-base-light);
}

.body.dark {
  background-color: var(--bg-base-dark);
}

/* ═══════════════════════════════════════════════════════════════════
 * SPINNER ANIMATION
 * ═══════════════════════════════════════════════════════════════════ */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ═══════════════════════════════════════════════════════════════════
 * LOADER WRAPPER (centered on page)
 * ═══════════════════════════════════════════════════════════════════ */
.loader-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════════════
 * SPINNER ELEMENT (matches LoadingSpinner component)
 * ═══════════════════════════════════════════════════════════════════ */
.loader {
  display: inline-block;
  width: var(--spinner-size);
  height: var(--spinner-size);
  border-radius: 50%;
  border-style: solid;
  border-width: var(--spinner-border-width);
  border-color: currentColor;
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

/* Theme color variants */
.body.light .loader {
  color: var(--text-muted-light);
}

.body.dark .loader {
  color: var(--text-muted-dark);
}