/* Palette values are the approved six colors for each family. Components use only semantic tokens. */
:root,
:root[data-bbx-palette="standard"] {
  --bbx-p-dark-bg: #1e1e1e;
  --bbx-p-dark-surface: #111111;
  --bbx-p-dark-surface-secondary: #1e1e1e;
  --bbx-p-dark-text: #e6e0cf;
  --bbx-p-dark-muted: #b8b8b8;
  --bbx-p-dark-utility: #ffffff;
  --bbx-p-light-bg: #e6e0cf;
  --bbx-p-light-surface: #ffffff;
  --bbx-p-light-surface-secondary: #b8b8b8;
  --bbx-p-light-text: #1e1e1e;
  --bbx-p-light-muted: #1e1e1e;
  --bbx-p-accent: #28030d;
  --bbx-p-notice-bg: #e6e0cf;
  --bbx-p-notice-error-bg: #b8b8b8;
  --bbx-p-notice-text: #111111;
  --bbx-p-notice-action: #111111;
  --bbx-p-notice-action-text: #e6e0cf;
  --bbx-header-bg: #e6e0cf;
  --bbx-header-text: #111111;
  --bbx-nav-bg: #111111;
  --bbx-nav-text: #e6e0cf;
  --bbx-shell-divider: #28030d;
  --bbx-p-hero-overlay: rgba(17, 17, 17, 0.12);
  /* Reserved until visual testing approves a brighter crimson-family text value. */
  --bbx-p-highlight-text: currentColor;
}

:root[data-bbx-palette="winter"] {
  --bbx-p-dark-bg: #1e1e1e;
  --bbx-p-dark-surface: #38383a;
  --bbx-p-dark-surface-secondary: #1e1e1e;
  --bbx-p-dark-text: #e6e0cf;
  --bbx-p-dark-muted: #aabac5;
  --bbx-p-dark-utility: #e6e0cf;
  --bbx-p-light-bg: #aabac5;
  --bbx-p-light-surface: #e6e0cf;
  --bbx-p-light-surface-secondary: #38383a;
  --bbx-p-light-text: #101a38;
  --bbx-p-light-muted: #38383a;
  --bbx-p-accent: #28030d;
  --bbx-p-notice-bg: #e6e0cf;
  --bbx-p-notice-error-bg: #aabac5;
  --bbx-p-notice-text: #1e1e1e;
  --bbx-p-notice-action: #1e1e1e;
  --bbx-p-notice-action-text: #e6e0cf;
  --bbx-header-bg: #aabac5;
  --bbx-header-text: #101a38;
  --bbx-nav-bg: #101a38;
  --bbx-nav-text: #e6e0cf;
  --bbx-shell-divider: #28030d;
  --bbx-p-hero-overlay: rgba(30, 30, 30, 0.12);
  --bbx-p-highlight-text: currentColor;
}

/* Halloween is registered as pending in Blackbriar Core. No colors are inferred for it. */

:root {
  color-scheme: dark;
  --bbx-page: var(--bbx-p-dark-bg);
  --bbx-surface: var(--bbx-p-dark-surface);
  --bbx-surface-secondary: var(--bbx-p-dark-surface-secondary);
  --bbx-text: var(--bbx-p-dark-text);
  --bbx-muted: var(--bbx-p-dark-muted);
  --bbx-utility: var(--bbx-p-dark-utility);
  --bbx-accent: var(--bbx-p-accent);
  --bbx-highlight-text: var(--bbx-p-highlight-text);
  --bbx-border: var(--bbx-p-dark-muted);
  --bbx-control-bg: var(--bbx-p-dark-surface);
  --bbx-focus: var(--bbx-p-dark-text);
  --bbx-button-text: var(--bbx-p-dark-text);
  --bbx-button-border: var(--bbx-p-dark-muted);
  --bbx-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --bbx-font-heritage: Georgia, "Times New Roman", serif;
  --bbx-font-supporting: Baskerville, "Baskerville Old Face", "Times New Roman", serif;
  --bbx-font-display: var(--bbx-font-heritage);
  --bbx-hero-tile-image: none;
  --bbx-hero-tile-size: auto;
  --bbx-hero-overlay: var(--bbx-p-hero-overlay);
  --bbx-width: 88rem;
  --bbx-reading-width: 46rem;
  --bbx-space-1: 0.375rem;
  --bbx-space-2: 0.75rem;
  --bbx-space-3: 1rem;
  --bbx-space-4: 1.5rem;
  --bbx-space-5: 2.5rem;
  --bbx-space-6: 4rem;
  --bbx-page-gutter: clamp(1rem, 3vw, 3rem);
}

@media (prefers-color-scheme: light) {
  :root:not([data-bbx-mode]) {
    color-scheme: light;
    --bbx-page: var(--bbx-p-light-bg);
    --bbx-surface: var(--bbx-p-light-surface);
    --bbx-surface-secondary: var(--bbx-p-light-surface-secondary);
    --bbx-text: var(--bbx-p-light-text);
    --bbx-muted: var(--bbx-p-light-muted);
    --bbx-utility: var(--bbx-p-light-text);
    --bbx-border: var(--bbx-p-light-muted);
    --bbx-control-bg: var(--bbx-p-light-surface);
    --bbx-focus: var(--bbx-p-light-text);
    --bbx-button-text: var(--bbx-p-dark-text);
    --bbx-button-border: var(--bbx-p-accent);
  }
}

:root[data-bbx-mode="light"] {
  color-scheme: light;
  --bbx-page: var(--bbx-p-light-bg);
  --bbx-surface: var(--bbx-p-light-surface);
  --bbx-surface-secondary: var(--bbx-p-light-surface-secondary);
  --bbx-text: var(--bbx-p-light-text);
  --bbx-muted: var(--bbx-p-light-muted);
  --bbx-utility: var(--bbx-p-light-text);
  --bbx-border: var(--bbx-p-light-muted);
  --bbx-control-bg: var(--bbx-p-light-surface);
  --bbx-focus: var(--bbx-p-light-text);
  --bbx-button-text: var(--bbx-p-dark-text);
  --bbx-button-border: var(--bbx-p-accent);
}

:root[data-bbx-mode="dark"] { color-scheme: dark; }
