/**
 * Woof design tokens — single source of truth for color, type, radius, and elevation.
 * Pair with Tailwind (CDN) using arbitrary values, e.g. bg-[var(--woof-surface-page)].
 * See docs/DESIGN_SYSTEM.md and /design-system for usage.
 */
:root {
  /* —— Brand (marketing shell: nav, Find a Walker, walker profiles) —— */
  --woof-brand-700: #a35200;
  --woof-brand-800: #8b4500;
  --woof-brand-900: #6a3600;

  /* —— Scheduling accent (My Bookings, energetic CTAs) —— */
  --woof-schedule-orange: #e67e22;
  --woof-schedule-brown: #7b3f00;
  --woof-schedule-brown-hover: #6a3600;

  /* —— Surfaces —— */
  --woof-surface-page: #faf6f0;
  --woof-surface-page-alt: #faf8f5;
  --woof-surface-elevated: #ffffff;
  --woof-surface-muted: #f2f2f2;
  --woof-surface-footer: #f5efe6;
  --woof-surface-mint: #d5f5e3;

  /* —— Borders —— */
  --woof-border-hairline: rgba(120, 53, 15, 0.1);
  --woof-border-card: rgba(231, 229, 228, 0.85);
  --woof-border-focus: var(--woof-schedule-orange);

  /* —— Text —— */
  --woof-text-primary: #1c1917;
  --woof-text-secondary: #57534e;
  --woof-text-muted: #78716c;
  --woof-text-on-brand: #ffffff;

  /* —— Semantic (badges, success, ratings) —— */
  --woof-success-600: #059669;
  --woof-success-700: #047857;
  --woof-amber-600: #d97706;

  /* —— Radius (friendly, 16–24px feel on cards) —— */
  --woof-radius-sm: 0.75rem;
  --woof-radius-md: 1rem;
  --woof-radius-lg: 1.5rem;
  --woof-radius-xl: 1.875rem;
  --woof-radius-pill: 9999px;

  /* —— Shadows —— */
  --woof-shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);
  --woof-shadow-md: 0 4px 6px -1px rgba(28, 25, 23, 0.07), 0 2px 4px -2px rgba(28, 25, 23, 0.05);
  --woof-shadow-lg: 0 10px 15px -3px rgba(28, 25, 23, 0.08), 0 4px 6px -4px rgba(28, 25, 23, 0.05);

  /* —— Typography (load Source Sans 3 variable in HTML — see _head_assets.html) —— */
  --woof-font-display: "Source Sans 3", system-ui, -apple-system, sans-serif;
  --woof-font-ui: "Source Sans 3", system-ui, -apple-system, sans-serif;

  /* —— Layout —— */
  --woof-content-max: 80rem;
  --woof-header-height: 3.5rem;
}

/**
 * Brand wordmark: explicit stack (same as UI — Source Sans 3).
 */
.woof-wordmark {
  font-family: var(--woof-font-display);
  font-optical-sizing: auto;
}