/* MealSprout v1 — opt-in design tokens.
 * Homepage-derived values are marked H; recommended extensions are marked E.
 * Production copy of docs/design-system/tokens.css. Keep both copies aligned.
 * See docs/STYLE-GUIDE.md for adoption and contrast constraints.
 */
.ms-theme {
  /* H: exact homepage palette */
  --ms-cream: #f9f7ef;
  --ms-ink: #243e32;
  --ms-green: #365c42;
  --ms-muted: #647266;
  --ms-sage: #e6ecdf;
  --ms-line: #d8dece;
  --ms-peach: #f2dfce;
  --ms-butter: #f3e8af;
  --ms-olive: #6f8050;
  --ms-green-hover: #254331;
  --ms-focus: #a55b39;
  --ms-pricing-surface: #efe4d7;
  --ms-closing-surface: #e6eadb;
  --ms-white: #ffffff;

  /* E: semantic aliases, using homepage colors */
  --ms-color-page: var(--ms-cream);
  --ms-color-text: var(--ms-ink);
  --ms-color-text-secondary: var(--ms-muted); /* Normal text on cream/white only. */
  --ms-color-action: var(--ms-green);
  --ms-color-action-hover: var(--ms-green-hover);
  --ms-color-on-action: var(--ms-white);
  --ms-color-divider: var(--ms-line); /* Decoration, not a control outline. */
  --ms-color-control-border: var(--ms-muted);
  --ms-color-focus: var(--ms-focus);
  --ms-color-success: var(--ms-green);
  --ms-color-success-surface: var(--ms-sage);
  --ms-color-warning: #765521; /* E: semantic state extension */
  --ms-color-warning-surface: var(--ms-butter);
  --ms-color-error: #9c3e35; /* E: semantic state extension */
  --ms-color-error-surface: #faebe6; /* E */

  /* H: exact font families and loaded weights */
  --ms-font-display: 'DM Serif Display', Georgia, serif;
  --ms-font-body: 'DM Sans', Arial, sans-serif;
  /* E: normalized roles. Root font size stays under browser/user control. */
  --ms-text-small: .875rem;
  --ms-text-body: 1rem;
  --ms-text-lead: 1.25rem;
  --ms-text-card: 1.1875rem;
  --ms-text-section: clamp(2.375rem, 3.6vw, 3.25rem);
  --ms-text-title: clamp(2.5rem, 4.5vw, 3.5rem);
  --ms-text-hero: clamp(3.625rem, 6.4vw, 5.75rem);
  --ms-leading-body: 1.7;
  --ms-leading-heading: 1.1;

  /* E: consolidated spacing scale derived from recurring homepage spacing */
  --ms-space-1: .25rem;
  --ms-space-2: .5rem;
  --ms-space-3: .75rem;
  --ms-space-4: 1rem;
  --ms-space-5: 1.25rem;
  --ms-space-6: 1.5rem;
  --ms-space-8: 2rem;
  --ms-space-10: 2.5rem;
  --ms-space-12: 3rem;
  --ms-space-16: 4rem;
  --ms-space-20: 5rem;
  --ms-space-24: 6rem;

  /* H: dimensions and surface details, named for reuse */
  --ms-content-max: 80rem; /* 1280px */
  --ms-gutter: 3.5rem; /* 56px each side */
  --ms-radius-button: 7px;
  --ms-radius-control: 6px;
  --ms-radius-card: 12px;
  --ms-radius-panel: 10px;
  --ms-radius-feature: 16px;
  --ms-shadow-card: 0 12px 25px #6c57310a;
  --ms-shadow-panel: 0 18px 40px #3d4f2a10;
  --ms-shadow-product: 0 15px 45px #23382932;
  --ms-motion-duration: 200ms;
  --ms-motion-easing: ease;
  /* E: useful app/content constraints */
  --ms-reading-max: 68ch;
  --ms-form-max: 38rem;
  --ms-target-min: 44px;
}
@media (max-width: 1200px) { .ms-theme { --ms-gutter: 2rem; } }
@media (max-width: 650px) { .ms-theme { --ms-gutter: 1.25rem; } }