/* BEAM Layer 3: the complete public token contract.
 * Foundations and color mappings live in beam/palette.css and beam/themes.css.
 * WordPress loads those first. Components consume only these semantic tokens.
 */
:root {
  /* Typography families */
  --font-heading: var(--typeface-serif);
  --font-body: var(--typeface-outfit);
  --font-mono: var(--typeface-jetbrains-mono);
  /* Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;
  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;
  /* Type scale */
  --text-5xs: 0.25rem;
  --text-4xs: 0.375rem;
  --text-3xs: 0.5rem;
  --text-2xs: 0.625rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;
  --text-8xl: 6rem;
  --text-9xl: 8rem;
  /* Line height */
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-base: 1.5;
  --leading-relaxed: 1.75;
  /* Letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-base: 0em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;
  /* Radii */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 999px;
  /* State opacity */
  --opacity-disabled: 0.5;
  --opacity-muted: 0.7;
  /* Stacking */
  --z-sink: -1;
  --z-pinned: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-toast: 400;
  --z-max: 100000;
  /* Motion */
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 1200ms;
  --ease-standard: ease-in-out;
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: linear(0, 0.6 15%, 1.1 30%, 1 100%);
  --transition-pressable: transform var(--duration-fast) var(--ease-standard), filter var(--duration-fast) var(--ease-standard);
  --transition-colors: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
  /* Blur */
  --blur-faint: 2px;
  --blur-soft: 4px;
  --blur-base: 8px;
  --blur-heavy: 16px;
  --blur-dense: 24px;
  /* WellLife extensions */
  --space-0: 0rem;
  --space-px: 1px;
  --radius-hero: 2rem;
}

/* Scope each explicit theme so inverse follows the nearest light/dark context.
 * Nested inverse sections stay inverse; only an explicit theme starts a new scope.
 */
@scope (:root, [data-theme='light'], [data-theme='dark']) to ([data-theme='light'], [data-theme='dark']) {
  :scope:not([data-theme='dark']),
  :scope[data-theme='dark'] [data-theme='inverse'] {
    color-scheme: light;
    --bg-page: var(--theme-light-bg-page);
    --bg-surface: var(--theme-light-bg-surface);
    --bg-surface-hover: var(--theme-light-bg-surface-hover);
    --bg-overlay: var(--theme-light-bg-overlay);
    --bg-sunken: var(--theme-light-bg-sunken);
    --ink-main: var(--theme-light-ink-main);
    --ink-muted: var(--theme-light-ink-muted);
    --ink-faint: var(--theme-light-ink-faint);
    --ink-inverse: var(--theme-light-ink-inverse);
    --border-base: var(--theme-light-border-base);
    --border-strong: var(--theme-light-border-strong);
    --action-primary: var(--theme-light-action-primary);
    --action-primary-hover: var(--theme-light-action-primary-hover);
    --action-neutral: var(--theme-light-action-neutral);
    --action-neutral-hover: var(--theme-light-action-neutral-hover);
    --action-contrast: var(--theme-light-action-contrast);
    --action-contrast-hover: var(--theme-light-action-contrast-hover);
    --brand-primary: var(--theme-light-brand-primary);
    --brand-glow: var(--theme-light-brand-glow);
    --shadow-close: var(--theme-light-shadow-close);
    --shadow-base: var(--theme-light-shadow-base);
    --shadow-far: var(--theme-light-shadow-far);
    --intent-success-subtle: var(--theme-light-intent-success-subtle);
    --intent-warning-subtle: var(--theme-light-intent-warning-subtle);
    --intent-critical-subtle: var(--theme-light-intent-critical-subtle);
    --syntax-ink: var(--theme-light-syntax-ink);
    --syntax-muted: var(--theme-light-syntax-muted);
    --syntax-accent: var(--theme-light-syntax-accent);
    --syntax-cool: var(--theme-light-syntax-cool);
    --mix-contrast: var(--theme-light-mix-contrast);
    --mix-main: var(--theme-light-mix-main);
    --bg-pattern: var(--theme-light-bg-pattern);
    --bg-inverse: var(--theme-light-bg-inverse);
    --bg-accent: var(--theme-light-bg-accent);
    --bg-accent-soft: var(--theme-light-bg-accent-soft);
    --bg-brand-soft: var(--theme-light-bg-brand-soft);
    --bg-glass: var(--theme-light-bg-glass);
    --ink-on-inverse: var(--theme-light-ink-on-inverse);
    --ink-accent: var(--theme-light-ink-accent);
    --ink-accent-inverse: var(--theme-light-ink-accent-inverse);
    --border-focus: var(--theme-light-border-focus);
    --border-inverse: var(--theme-light-border-inverse);
    --action-surface: var(--theme-light-action-surface);
    --action-surface-hover: var(--theme-light-action-surface-hover);
    --action-secondary: var(--theme-light-action-secondary);
    --action-secondary-hover: var(--theme-light-action-secondary-hover);
    --intent-success-base: var(--theme-light-intent-success-base);
    --intent-critical-base: var(--theme-light-intent-critical-base);
    --action-danger: var(--theme-light-action-danger);
    --action-danger-hover: var(--theme-light-action-danger-hover);
    --intent-success-strong: var(--theme-light-intent-success-strong);
    --intent-warning-base: var(--theme-light-intent-warning-base);
    --intent-warning-strong: var(--theme-light-intent-warning-strong);
    --intent-critical-strong: var(--theme-light-intent-critical-strong);
    --bg-scrim: var(--theme-light-bg-scrim);
  }

  :scope[data-theme='dark'],
  :scope:not([data-theme='dark']) [data-theme='inverse'] {
    color-scheme: dark;
    --bg-page: var(--theme-dark-bg-page);
    --bg-surface: var(--theme-dark-bg-surface);
    --bg-surface-hover: var(--theme-dark-bg-surface-hover);
    --bg-overlay: var(--theme-dark-bg-overlay);
    --bg-sunken: var(--theme-dark-bg-sunken);
    --ink-main: var(--theme-dark-ink-main);
    --ink-muted: var(--theme-dark-ink-muted);
    --ink-faint: var(--theme-dark-ink-faint);
    --ink-inverse: var(--theme-dark-ink-inverse);
    --border-base: var(--theme-dark-border-base);
    --border-strong: var(--theme-dark-border-strong);
    --action-primary: var(--theme-dark-action-primary);
    --action-primary-hover: var(--theme-dark-action-primary-hover);
    --action-neutral: var(--theme-dark-action-neutral);
    --action-neutral-hover: var(--theme-dark-action-neutral-hover);
    --action-contrast: var(--theme-dark-action-contrast);
    --action-contrast-hover: var(--theme-dark-action-contrast-hover);
    --brand-primary: var(--theme-dark-brand-primary);
    --brand-glow: var(--theme-dark-brand-glow);
    --shadow-close: var(--theme-dark-shadow-close);
    --shadow-base: var(--theme-dark-shadow-base);
    --shadow-far: var(--theme-dark-shadow-far);
    --intent-success-subtle: var(--theme-dark-intent-success-subtle);
    --intent-warning-subtle: var(--theme-dark-intent-warning-subtle);
    --intent-critical-subtle: var(--theme-dark-intent-critical-subtle);
    --syntax-ink: var(--theme-dark-syntax-ink);
    --syntax-muted: var(--theme-dark-syntax-muted);
    --syntax-accent: var(--theme-dark-syntax-accent);
    --syntax-cool: var(--theme-dark-syntax-cool);
    --mix-contrast: var(--theme-dark-mix-contrast);
    --mix-main: var(--theme-dark-mix-main);
    --border-focus: var(--theme-dark-border-focus);
    --action-danger: var(--theme-dark-action-danger);
    --action-danger-hover: var(--theme-dark-action-danger-hover);
    --intent-success-base: var(--theme-dark-intent-success-base);
    --intent-success-strong: var(--theme-dark-intent-success-strong);
    --intent-warning-base: var(--theme-dark-intent-warning-base);
    --intent-warning-strong: var(--theme-dark-intent-warning-strong);
    --intent-critical-base: var(--theme-dark-intent-critical-base);
    --intent-critical-strong: var(--theme-dark-intent-critical-strong);
    --bg-scrim: var(--theme-dark-bg-scrim);
    --bg-pattern: var(--theme-dark-bg-pattern);
    --bg-inverse: var(--theme-dark-bg-inverse);
    --bg-accent: var(--theme-dark-bg-accent);
    --bg-accent-soft: var(--theme-dark-bg-accent-soft);
    --bg-brand-soft: var(--theme-dark-bg-brand-soft);
    --bg-glass: var(--theme-dark-bg-glass);
    --ink-on-inverse: var(--theme-dark-ink-on-inverse);
    --ink-accent: var(--theme-dark-ink-accent);
    --ink-accent-inverse: var(--theme-dark-ink-accent-inverse);
    --border-inverse: var(--theme-dark-border-inverse);
    --action-surface: var(--theme-dark-action-surface);
    --action-surface-hover: var(--theme-dark-action-surface-hover);
    --action-secondary: var(--theme-dark-action-secondary);
    --action-secondary-hover: var(--theme-dark-action-secondary-hover);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}
@media (min-width: 64rem) {
  :root {
    --radius-hero: 3rem;
  }
}