/*
 * BioBalance Public-Site Design Tokens — v1.0
 * Core surface colors are taken from the approved transparency-validation board.
 * Intelligence Purple and Soft Gold align with the approved BioBalance token system.
 */

:root {
  /* Brand colors */
  --bb-color-forest: #0f2e24;
  --bb-color-cream: #faf8f3;
  --bb-color-mist: #d8e1d6;
  --bb-color-white: #ffffff;
  --bb-color-gold-soft: #d8b45f;
  --bb-color-purple-intelligence: #8f7cff;

  /* Forest interaction states */
  --bb-color-forest-hover: #174737;
  --bb-color-forest-pressed: #09221a;
  --bb-color-forest-disabled: rgba(15, 46, 36, 0.38);

  /* Gold interaction states */
  --bb-color-gold-hover: #e0c173;
  --bb-color-gold-pressed: #b8903d;
  --bb-color-gold-disabled: rgba(216, 180, 95, 0.42);

  /* Intelligence interaction states */
  --bb-color-purple-hover: #a99bff;
  --bb-color-purple-pressed: #6f5fe0;
  --bb-color-purple-disabled: rgba(143, 124, 255, 0.4);

  /* Text and neutrals */
  --bb-color-text-primary: #102019;
  --bb-color-text-secondary: #39483f;
  --bb-color-text-muted: #6f786f;
  --bb-color-text-subtle: #8e968f;
  --bb-color-text-inverse: #faf8f3;
  --bb-color-neutral-100: #f5f3ed;
  --bb-color-neutral-200: #e9e6de;
  --bb-color-neutral-300: #d4d1c9;
  --bb-color-neutral-700: #4e5952;
  --bb-color-neutral-900: #18231e;

  /* Surfaces */
  --bb-surface-page: var(--bb-color-cream);
  --bb-surface-card: var(--bb-color-white);
  --bb-surface-soft: rgba(216, 225, 214, 0.42);
  --bb-surface-forest: var(--bb-color-forest);
  --bb-surface-glass-light: rgba(255, 255, 255, 0.74);
  --bb-surface-glass-dark: rgba(15, 46, 36, 0.82);

  /* Borders */
  --bb-border-subtle: rgba(15, 46, 36, 0.1);
  --bb-border-default: rgba(15, 46, 36, 0.16);
  --bb-border-strong: rgba(15, 46, 36, 0.28);
  --bb-border-inverse: rgba(250, 248, 243, 0.2);
  --bb-border-width: 1px;

  /* Shadows and glow */
  --bb-shadow-xs: 0 2px 8px rgba(15, 46, 36, 0.06);
  --bb-shadow-sm: 0 10px 30px rgba(15, 46, 36, 0.09);
  --bb-shadow-md: 0 20px 60px rgba(15, 46, 36, 0.13);
  --bb-shadow-lg: 0 30px 100px rgba(15, 46, 36, 0.18);
  --bb-glow-gold: 0 0 32px rgba(216, 180, 95, 0.24);
  --bb-glow-purple: 0 0 32px rgba(143, 124, 255, 0.22);

  /* Focus and disabled behavior */
  --bb-focus-ring-color: rgba(143, 124, 255, 0.52);
  --bb-focus-ring: 0 0 0 3px var(--bb-focus-ring-color);
  --bb-disabled-opacity: 0.46;

  /* Spacing — 8px base rhythm with supporting half steps */
  --bb-space-2xs: 4px;
  --bb-space-xs: 8px;
  --bb-space-sm: 12px;
  --bb-space-md: 16px;
  --bb-space-lg: 24px;
  --bb-space-xl: 32px;
  --bb-space-2xl: 48px;
  --bb-space-3xl: 64px;
  --bb-space-section: 88px;

  /* Component radii */
  --bb-radius-xs: 4px;
  --bb-radius-sm: 8px;
  --bb-radius-md: 12px;
  --bb-radius-lg: 16px;
  --bb-radius-xl: 24px;
  --bb-radius-2xl: 32px;
  --bb-radius-pill: 999px;

  /* Motion */
  --bb-motion-fast: 140ms;
  --bb-motion-standard: 240ms;
  --bb-motion-slow: 420ms;
  --bb-motion-ambient: 7000ms;
  --bb-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bb-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --bb-ease-exit: cubic-bezier(0.7, 0, 0.84, 0);

  /* Typography roles */
  --bb-font-ui: "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bb-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --bb-type-label: 0.6875rem;
  --bb-type-small: 0.8125rem;
  --bb-type-body: 0.9375rem;
  --bb-type-card-title: 1.125rem;
  --bb-type-section: clamp(1.75rem, 3vw, 2.75rem);
  --bb-type-display: clamp(2.5rem, 5vw, 4.5rem);
  --bb-type-hero: clamp(3rem, 6vw, 5.5rem);

  /* Layout */
  --bb-content-max: 1440px;
  --bb-content-reading: 720px;
  --bb-gutter: clamp(20px, 4vw, 64px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --bb-motion-fast: 0ms;
    --bb-motion-standard: 0ms;
    --bb-motion-slow: 0ms;
    --bb-motion-ambient: 0ms;
  }
}