/* Static reference is the visual source of truth (D32). */
:root {
  --to-color-brand: #8458B3;
  --to-color-text: #000000;
  --to-color-background: #FFFFFF;
  --to-color-surface: #FFFFFF;
  --to-color-surface-raised: #FFFFFF;
  --to-color-surface-cool: #E5EAF5;
  --to-color-surface-cool-rgb: 229,234,245;
  --to-color-text-muted: #595959;
  --to-color-border: #E2E2E2;
  --to-color-border-control: #000000;
  --to-color-lavender: #D0BDF4;
  --to-color-ice: #A0D2EB;
  --to-color-on-action: #FFFFFF;
  --to-color-action: var(--to-color-brand);
  --to-color-action-hover: #6B4390;
  --to-color-action-active: #2E2350;
  --to-color-focus: var(--to-color-brand);
  --to-color-disabled-bg: #E5E1ED;
  --to-color-disabled-text: var(--to-color-text-muted);
  --to-color-success: #1E684A;
  --to-color-surface-success: #EDF7F1;
  --to-color-warning: #8A4A00;
  --to-color-surface-warning: #FFF5E8;
  --to-color-danger: #A52A41;
  --to-color-surface-danger: #FFF0F3;
  --to-color-info: #245B89;
  --to-color-surface-info: #EEF6FC;
  --to-color-overlay: rgba(0,0,0,.45);
  --to-color-header: #FFFFFF;
  --to-font-body: 'Onest', system-ui, sans-serif;
  --to-font-mono: 'Geist Mono', ui-monospace, monospace;
  --to-font-script: 'Pinyon Script', cursive;
  --to-color-cart: #000000;
  --to-color-night: #1D1638;
  --to-color-seasonal: #4A2A7A;
  --to-header-height: 4rem;
  --to-header-logo-height: 2.5rem;
  --to-header-search-width: 12.5rem;
  --to-font-display: 'Onest', system-ui, sans-serif;
  --to-font-weight-regular: 400;
  --to-font-weight-medium: 500;
  --to-font-weight-semibold: 600;
  --to-font-weight-bold: 700;
  --to-font-weight-display: 300;
  --to-font-size-caption: .8125rem;
  --to-font-size-small: .875rem;
  --to-font-size-body: 1.125rem;
  --to-font-size-lead: 1.125rem;
  --to-font-size-h3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --to-font-size-h2: 3.25rem;
  --to-font-size-h1: 3.5rem;
  --to-line-height-body: 1.4;
  --to-line-height-heading: 1.05;
  --to-line-height-compact: 1.3;
  --to-letter-spacing-heading: -.02em;
  --to-space-1: .25rem;
  --to-space-2: .5rem;
  --to-space-3: .75rem;
  --to-space-4: 1rem;
  --to-space-5: 1.25rem;
  --to-space-6: 1.5rem;
  --to-space-7: 2rem;
  --to-space-8: 2.5rem;
  --to-space-9: 3rem;
  --to-space-10: 4rem;
  --to-space-11: 5rem;
  --to-space-12: 6rem;
  --to-radius-small: .5rem;
  --to-radius-control: .5rem;
  --to-radius-card: 1rem;
  --to-radius-panel: 1.5rem;
  --to-radius-pill: 999px;
  --to-border-width: 1px;
  --to-border-width-focus: 2px;
  --to-focus-offset: 3px;
  --to-control-height: 2.75rem;
  --to-target-min: 2.75rem;
  --to-shadow-card: 0 22px 44px -30px rgba(25,22,20,.5);
  --to-shadow-overlay: 0 24px 64px -24px rgba(36,25,52,.35);
  --to-container-wide: 1280px;
  --to-container-reading: 760px;
  --to-container-form: 520px;
  --to-gutter: 2rem;
  --to-section-space: 4rem;
  --to-grid-gap: 1.5rem;
  /* Keep Bootstrap's stacking scale: dropdown 1000, backdrop 1050, modal 1055. */
  --to-z-sticky: 1020;
  --to-z-header: 1030;
  --to-z-overlay: 1040;
  --to-z-drawer: 1045;
  --to-z-modal: 1055;
  --to-z-toast: 1090;
  --to-motion-fast: 120ms;
  --to-motion-normal: 200ms;
  --to-motion-slow: 300ms;
  --to-ease: cubic-bezier(.2,.7,.2,1);
}
@media (max-width: 960px) {
  :root { --to-gutter: 1.125rem; --to-section-space: 2.5rem; --to-grid-gap: 1rem; --to-font-size-h1: 2.875rem; --to-font-size-h2: 2.25rem; }
}
@media (max-width: 560px) {
  :root { --to-gutter: 1.125rem; --to-font-size-h1: 2.375rem; }
}