/* BEAM CSS v2026.1 token foundations: https://beamcss.org/starter/theme.css
 * Adapted for WellLife; plain CSS, no build step. Source: https://beamcss.org/install/
 */

/* Layer 2: all color decisions. Both themes expose the same contract. */
:root {
  /* Light */
  --theme-light-bg-page: var(--palette-cream);
  --theme-light-bg-surface: var(--palette-white);
  --theme-light-bg-surface-hover: var(--palette-stone-100);
  --theme-light-bg-overlay: var(--palette-overlay);
  --theme-light-bg-sunken: var(--palette-stone);
  --theme-light-ink-main: var(--palette-slate);
  --theme-light-ink-muted: var(--palette-slate-muted);
  --theme-light-ink-faint: var(--palette-slate-faint);
  --theme-light-ink-inverse: var(--palette-white);
  --theme-light-border-base: var(--palette-stone);
  --theme-light-border-strong: var(--palette-stone-dark);
  --theme-light-action-primary: var(--palette-rust);
  --theme-light-action-primary-hover: var(--palette-rust-dark);
  --theme-light-action-neutral: var(--palette-stone-200);
  --theme-light-action-neutral-hover: var(--palette-stone-300);
  --theme-light-action-contrast: var(--palette-stone-900);
  --theme-light-action-contrast-hover: var(--palette-stone-950);
  --theme-light-brand-primary: var(--palette-rust);
  --theme-light-brand-glow: var(--palette-mint);
  --theme-light-shadow-close: 0 2px 8px var(--palette-shadow);
  --theme-light-shadow-base: 0 8px 24px var(--palette-shadow);
  --theme-light-shadow-far: 0 20px 40px var(--palette-shadow);
  --theme-light-intent-success-subtle: color-mix(in srgb, var(--palette-green-500), var(--palette-white) 85%);
  --theme-light-intent-warning-subtle: color-mix(in srgb, var(--palette-yellow-500), var(--palette-white) 85%);
  --theme-light-intent-critical-subtle: color-mix(in srgb, var(--palette-red-500), var(--palette-white) 85%);
  --theme-light-syntax-ink: var(--palette-stone-800);
  --theme-light-syntax-muted: var(--palette-stone-500);
  --theme-light-syntax-accent: var(--palette-rust-dark);
  --theme-light-syntax-cool: var(--palette-cyan-700);
  --theme-light-mix-contrast: var(--palette-black);
  --theme-light-mix-main: var(--palette-white);
  --theme-light-bg-pattern: var(--palette-pattern);
  --theme-light-bg-inverse: var(--palette-teal);
  --theme-light-bg-accent: var(--palette-mint);
  --theme-light-bg-accent-soft: var(--palette-mint-soft);
  --theme-light-bg-brand-soft: var(--palette-rust-soft);
  --theme-light-bg-glass: var(--palette-glass);
  --theme-light-ink-on-inverse: var(--palette-stone);
  --theme-light-ink-accent: var(--palette-teal);
  --theme-light-ink-accent-inverse: var(--palette-mint);
  --theme-light-border-focus: var(--palette-rust);
  --theme-light-border-inverse: var(--palette-glass);
  --theme-light-action-surface: var(--palette-white);
  --theme-light-action-surface-hover: var(--palette-cream);
  --theme-light-action-secondary: var(--palette-teal-action);
  --theme-light-action-secondary-hover: var(--palette-teal);
  --theme-light-intent-success-base: var(--palette-mint);
  --theme-light-intent-critical-base: var(--palette-red);
  --theme-light-action-danger: var(--palette-red-500);
  --theme-light-action-danger-hover: color-mix(in srgb, var(--palette-red-500), var(--palette-black) 10%);
  --theme-light-intent-success-strong: color-mix(in srgb, var(--palette-green-500), var(--palette-black) 40%);
  --theme-light-intent-warning-base: var(--palette-yellow-500);
  --theme-light-intent-warning-strong: color-mix(in srgb, var(--palette-yellow-500), var(--palette-black) 40%);
  --theme-light-intent-critical-strong: color-mix(in srgb, var(--palette-red-500), var(--palette-black) 40%);
  --theme-light-bg-scrim: color-mix(in srgb, var(--palette-stone-950), transparent 30%);

  /* Dark */
  --theme-dark-bg-page: var(--palette-teal-950);
  --theme-dark-bg-surface: var(--palette-teal-900);
  --theme-dark-bg-surface-hover: var(--palette-teal-800);
  --theme-dark-bg-overlay: var(--palette-dark-overlay);
  --theme-dark-bg-sunken: var(--palette-black);
  --theme-dark-ink-main: var(--palette-cream);
  --theme-dark-ink-muted: var(--palette-stone-300);
  --theme-dark-ink-faint: var(--palette-stone-400);
  --theme-dark-ink-inverse: var(--palette-slate);
  --theme-dark-border-base: var(--palette-teal-800);
  --theme-dark-border-strong: var(--palette-teal);
  --theme-dark-action-primary: var(--palette-rust-light);
  --theme-dark-action-primary-hover: var(--palette-rust-lighter);
  --theme-dark-action-neutral: var(--palette-stone-800);
  --theme-dark-action-neutral-hover: var(--palette-stone-700);
  --theme-dark-action-contrast: var(--palette-stone-100);
  --theme-dark-action-contrast-hover: var(--palette-white);
  --theme-dark-brand-primary: var(--palette-rust-light);
  --theme-dark-brand-glow: var(--palette-mint);
  --theme-dark-shadow-close: 0 1px 2px 0 color-mix(in srgb, var(--palette-black), transparent 50%);
  --theme-dark-shadow-base: 0 4px 6px -1px color-mix(in srgb, var(--palette-black), transparent 40%);
  --theme-dark-shadow-far: 0 10px 15px -3px color-mix(in srgb, var(--palette-black), transparent 30%);
  --theme-dark-intent-success-subtle: color-mix(in srgb, var(--palette-green-500), var(--palette-stone-900) 85%);
  --theme-dark-intent-warning-subtle: color-mix(in srgb, var(--palette-yellow-500), var(--palette-stone-900) 85%);
  --theme-dark-intent-critical-subtle: color-mix(in srgb, var(--palette-red-500), var(--palette-stone-900) 85%);
  --theme-dark-syntax-ink: var(--palette-stone-200);
  --theme-dark-syntax-muted: var(--palette-stone-500);
  --theme-dark-syntax-accent: var(--palette-rust-light);
  --theme-dark-syntax-cool: var(--palette-cyan-400);
  --theme-dark-mix-contrast: var(--palette-white);
  --theme-dark-mix-main: var(--palette-black);
  --theme-dark-border-focus: var(--palette-rust-light);
  --theme-dark-action-danger: var(--palette-red-500);
  --theme-dark-action-danger-hover: color-mix(in srgb, var(--palette-red-500), var(--palette-black) 10%);
  --theme-dark-intent-success-base: var(--palette-green-500);
  --theme-dark-intent-success-strong: color-mix(in srgb, var(--palette-green-500), var(--palette-white) 35%);
  --theme-dark-intent-warning-base: var(--palette-yellow-500);
  --theme-dark-intent-warning-strong: color-mix(in srgb, var(--palette-yellow-500), var(--palette-white) 35%);
  --theme-dark-intent-critical-base: var(--palette-red-500);
  --theme-dark-intent-critical-strong: color-mix(in srgb, var(--palette-red-500), var(--palette-white) 35%);
  --theme-dark-bg-scrim: color-mix(in srgb, var(--palette-stone-950), transparent 30%);
  --theme-dark-bg-pattern: var(--palette-teal-900);
  --theme-dark-bg-inverse: var(--palette-mint);
  --theme-dark-bg-accent: var(--palette-teal);
  --theme-dark-bg-accent-soft: var(--palette-teal-800);
  --theme-dark-bg-brand-soft: var(--palette-rust-soft);
  --theme-dark-bg-glass: var(--palette-dark-glass);
  --theme-dark-ink-on-inverse: var(--palette-slate-muted);
  --theme-dark-ink-accent: var(--palette-mint);
  --theme-dark-ink-accent-inverse: var(--palette-teal);
  --theme-dark-border-inverse: var(--palette-dark-glass);
  --theme-dark-action-surface: var(--palette-teal-950);
  --theme-dark-action-surface-hover: var(--palette-teal-900);
  --theme-dark-action-secondary: var(--palette-mint);
  --theme-dark-action-secondary-hover: var(--palette-mint-light);
}