.jungle-challenge-board-pack {
  --jcb-canvas-light: #f6eacb;
  --jcb-canvas-dark: #14201a;
  --jcb-surface-light: #fff8e8;
  --jcb-surface-dark: #1f3027;
  --jcb-raised-light: #ffffff;
  --jcb-raised-dark: #2a4134;
  --jcb-text-light: #25323b;
  --jcb-text-dark: #f9edce;
  --jcb-muted-light: #625e52;
  --jcb-muted-dark: #b9c5ba;
  --jcb-mango-light: #e89135;
  --jcb-mango-dark: #ff9a55;
  --jcb-mango-edge-light: #a85424;
  --jcb-mango-edge-dark: #b94a1f;
  --jcb-jungle-light: #237a53;
  --jcb-jungle-dark: #59d18c;
  --jcb-jungle-edge-light: #145338;
  --jcb-jungle-edge-dark: #27704a;
  --jcb-river-light: #2b6fa8;
  --jcb-river-dark: #70b9f1;
  --jcb-focus-light: #1d65a1;
  --jcb-focus-dark: #8ccbff;
  --jcb-banana: #f4c150;
  --jcb-danger-light: #b83d42;
  --jcb-danger-dark: #ff7a7f;
  --jcb-border-light: #a9753c;
  --jcb-border-dark: #6e8f75;

  --jcb-canvas: var(--jcb-canvas-light);
  --jcb-surface: var(--jcb-surface-light);
  --jcb-raised: var(--jcb-raised-light);
  --jcb-text: var(--jcb-text-light);
  --jcb-muted: var(--jcb-muted-light);
  --jcb-primary: var(--jcb-mango-light);
  --jcb-primary-edge: var(--jcb-mango-edge-light);
  --jcb-secondary: var(--jcb-jungle-light);
  --jcb-secondary-edge: var(--jcb-jungle-edge-light);
  --jcb-info: var(--jcb-river-light);
  --jcb-focus: var(--jcb-focus-light);
  --jcb-danger: var(--jcb-danger-light);
  --jcb-border: var(--jcb-border-light);
  --jcb-highlight: rgb(255 255 255 / 72%);
  --jcb-shadow: rgb(73 49 27 / 24%);
  --jcb-on-primary: var(--jcb-text-light);
  --jcb-on-secondary: var(--jcb-surface-light);

  --jcb-font-display: "Fredoka Variable", Fredoka, ui-rounded, sans-serif;
  --jcb-font-body: "Nunito Sans Variable", "Nunito Sans", ui-rounded, sans-serif;

  --jcb-space-1: 0.25rem;
  --jcb-space-2: 0.5rem;
  --jcb-space-3: 0.75rem;
  --jcb-space-4: 1rem;
  --jcb-space-6: 1.5rem;
  --jcb-space-8: 2rem;
  --jcb-space-12: 3rem;
  --jcb-space-18: 4.5rem;

  --jcb-radius-xs: 6px;
  --jcb-radius-sm: 10px;
  --jcb-radius-md: 14px;
  --jcb-radius-lg: 20px;
  --jcb-radius-xl: 28px;
  --jcb-radius-pill: 9999px;

  --jcb-content-width: 70rem;
  --jcb-control-height: 3rem;
  --jcb-touch-target: 2.75rem;
  --jcb-motion-press: 110ms;
  --jcb-motion-fast: 160ms;
  --jcb-motion-reveal: 180ms;

  color: var(--jcb-text);
  background: var(--jcb-canvas);
  font-family: var(--jcb-font-body);
}

.jungle-challenge-board-pack[data-jcb-theme="dark"] {
  color-scheme: dark;
  --jcb-canvas: var(--jcb-canvas-dark);
  --jcb-surface: var(--jcb-surface-dark);
  --jcb-raised: var(--jcb-raised-dark);
  --jcb-text: var(--jcb-text-dark);
  --jcb-muted: var(--jcb-muted-dark);
  --jcb-primary: var(--jcb-mango-dark);
  --jcb-primary-edge: var(--jcb-mango-edge-dark);
  --jcb-secondary: var(--jcb-jungle-dark);
  --jcb-secondary-edge: var(--jcb-jungle-edge-dark);
  --jcb-info: var(--jcb-river-dark);
  --jcb-focus: var(--jcb-focus-dark);
  --jcb-danger: var(--jcb-danger-dark);
  --jcb-border: var(--jcb-border-dark);
  --jcb-highlight: rgb(255 255 255 / 12%);
  --jcb-shadow: rgb(0 0 0 / 45%);
  --jcb-on-primary: var(--jcb-canvas-dark);
  --jcb-on-secondary: var(--jcb-canvas-dark);
}

@media (prefers-color-scheme: dark) {
  .jungle-challenge-board-pack[data-jcb-theme="system"] {
    color-scheme: dark;
    --jcb-canvas: var(--jcb-canvas-dark);
    --jcb-surface: var(--jcb-surface-dark);
    --jcb-raised: var(--jcb-raised-dark);
    --jcb-text: var(--jcb-text-dark);
    --jcb-muted: var(--jcb-muted-dark);
    --jcb-primary: var(--jcb-mango-dark);
    --jcb-primary-edge: var(--jcb-mango-edge-dark);
    --jcb-secondary: var(--jcb-jungle-dark);
    --jcb-secondary-edge: var(--jcb-jungle-edge-dark);
    --jcb-info: var(--jcb-river-dark);
    --jcb-focus: var(--jcb-focus-dark);
    --jcb-danger: var(--jcb-danger-dark);
    --jcb-border: var(--jcb-border-dark);
    --jcb-highlight: rgb(255 255 255 / 12%);
    --jcb-shadow: rgb(0 0 0 / 45%);
    --jcb-on-primary: var(--jcb-canvas-dark);
    --jcb-on-secondary: var(--jcb-canvas-dark);
  }
}

.jungle-challenge-board-pack :focus-visible {
  outline: 3px solid var(--jcb-focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .jungle-challenge-board-pack *,
  .jungle-challenge-board-pack *::before,
  .jungle-challenge-board-pack *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}