/* =========================================================
   TREEHOUSE + WEB AWESOME THEME BRIDGE

   Web Awesome owns control behavior and component anatomy.
   Treehouse owns color, typography, density, and shape.
   This file must load after Web Awesome's default theme and
   after tokens.css so every surface receives the same mapping.
   ========================================================= */

:root {
  --wa-font-family-body: var(--font-body);
  --wa-font-family-heading: var(--font-display);
  --wa-font-family-longform: var(--font-display);
  --wa-font-size-scale: 0.9375;
  --wa-space-scale: 0.875;
  --wa-border-radius-scale: 1.75;
  --wa-content-spacing: 1rem;

  --wa-color-surface-raised: var(--color-surface-raised);
  --wa-color-surface-default: var(--color-surface);
  --wa-color-surface-lowered: var(--color-surface-soft);
  --wa-color-surface-border: var(--color-border-strong);
  --wa-color-text-normal: var(--color-text);
  --wa-color-text-quiet: var(--color-text-muted);
  --wa-color-text-link: var(--quiet-forest, #244e3e);
  --wa-color-focus: var(--color-accent);

  --wa-color-brand-fill-quiet: #edf1e9;
  --wa-color-brand-fill-normal: #dfe7dc;
  --wa-color-brand-fill-loud: var(--color-accent);
  --wa-color-brand-border-quiet: rgba(36, 78, 62, 0.12);
  --wa-color-brand-border-normal: rgba(36, 78, 62, 0.28);
  --wa-color-brand-border-loud: var(--color-accent-strong);
  --wa-color-brand-on-quiet: var(--quiet-forest-deep, #17382d);
  --wa-color-brand-on-normal: var(--quiet-forest-deep, #17382d);
  --wa-color-brand-on-loud: #17271f;

  --wa-color-neutral-fill-quiet: rgba(255, 253, 247, 0.78);
  --wa-color-neutral-fill-normal: var(--color-surface-soft);
  --wa-color-neutral-fill-loud: var(--quiet-forest-deep, #17382d);
  --wa-color-neutral-border-quiet: var(--color-border);
  --wa-color-neutral-border-normal: var(--color-border-strong);
  --wa-color-neutral-border-loud: rgba(36, 78, 62, 0.52);
  --wa-color-neutral-on-quiet: var(--color-text-muted);
  --wa-color-neutral-on-normal: var(--color-text);
  --wa-color-neutral-on-loud: #fffaf0;

  --wa-form-control-background-color: rgba(255, 253, 247, 0.94);
  --wa-form-control-border-color: var(--color-border-strong);
  --wa-form-control-border-radius: 0.75rem;
  --wa-form-control-label-color: var(--color-text);
  --wa-form-control-label-font-weight: 700;
  --wa-form-control-value-color: var(--color-text);
  --wa-form-control-hint-color: var(--color-text-muted);
  --wa-form-control-placeholder-color: #776f64;
  --wa-form-control-padding-block: 0.625em;
  --wa-form-control-padding-inline: 0.875em;
  --wa-panel-border-radius: 1rem;
  --wa-focus-ring-width: 0.125rem;
  --wa-focus-ring-offset: 0.125rem;
}

body.membership-premium {
  --wa-color-brand-fill-quiet: #edf1e9;
  --wa-color-brand-fill-normal: #dfe7dc;
  --wa-color-brand-border-normal: rgba(36, 78, 62, 0.34);
  --wa-color-brand-on-normal: #17382d;
}

wa-button,
wa-input,
wa-textarea,
wa-select {
  font-family: var(--font-body);
}

wa-button::part(base) {
  min-height: 2.75rem;
  border-radius: 0.75rem;
  font-weight: 800;
}

wa-input::part(base),
wa-textarea::part(base),
wa-select::part(combobox) {
  border-radius: 0.75rem;
  box-shadow: none;
}

wa-input:focus-within::part(base),
wa-textarea:focus-within::part(base),
wa-select:focus-within::part(combobox) {
  border-color: var(--quiet-forest, #244e3e);
  box-shadow: 0 0 0 0.1875rem rgba(36, 78, 62, 0.1);
}