/*! Main Street design system 1.0.0 (2026-11-07). Tokens: every value the components read.
   Light on :root. Dark follows the visitor's system preference unless the page sets
   data-theme="light" or data-theme="dark" on <html>. Vertical presets switch with
   data-accent="clinic" or data-accent="trades" on <html>; "kitchen" is the default.
   A preset changes the accent group only (buttons, links, accent, focus, awning, band). */

:root {
  color-scheme: light;

  /* Surfaces: warm cream paper */
  --ms-canvas: #f8f2e7;
  --ms-surface: #fffcf6;
  --ms-surface-alt: #f1e8d8;
  --ms-inset: #f4ede1;

  /* Text */
  --ms-ink: #241a13;
  --ms-body: #3b2f26;
  --ms-muted: #554739;

  /* Lines */
  --ms-rule: #e3d7c4;
  --ms-rule-strong: #cdbca4;
  --ms-control: #847161;
  --ms-leader: #a8957d;

  /* Accent group (the kitchen preset). Presets override only this group. */
  --ms-btn: #a9442a;
  --ms-btn-hover: #8f3721;
  --ms-btn-ink: #ffffff;
  --ms-btn-line: #a9442a;
  --ms-link: #82301b;
  --ms-link-line: #c98a6f;
  --ms-accent: #475120;
  --ms-accent-fill: #5d6b2f;
  --ms-accent-on: #ffffff;
  --ms-accent-soft: #ecedd5;
  --ms-focus: #84321d;
  --ms-awning: #a9442a;
  --ms-awning-alt: #c8694a;
  --ms-band: #2f3a1c;
  --ms-band-ink: #f8f1e3;
  --ms-band-body: #e1dac8;
  --ms-band-muted: #d0c9b2;
  --ms-band-rule: #4c5733;
  --ms-band-btn: #f8f1e3;
  --ms-band-btn-hover: #ffffff;
  --ms-band-btn-ink: #2f3a1c;

  /* Status */
  --ms-ok: #2c6329;
  --ms-ok-soft: #e1edd6;
  --ms-ok-dot: #3d8a38;
  --ms-warn: #744600;
  --ms-warn-soft: #f6e6c6;
  --ms-warn-dot: #b07408;
  --ms-danger: #a1261c;
  --ms-danger-soft: #f8e1dc;
  --ms-info: #23525c;
  --ms-info-soft: #dcebec;

  /* Data viz: categorical (alternating warm and cool, stepped lightness) */
  --ms-viz-1: #a9442a;
  --ms-viz-2: #1e6a73;
  --ms-viz-3: #a67312;
  --ms-viz-4: #3c5c8c;
  --ms-viz-5: #66762a;
  --ms-viz-6: #4a3426;
  /* Sequential ramp (terracotta) and diverging ramp (teal to terracotta) */
  --ms-seq-1: #f2dacd;
  --ms-seq-2: #e2a98f;
  --ms-seq-3: #c87556;
  --ms-seq-4: #a9442a;
  --ms-seq-5: #6c2916;
  --ms-div-1: #1e6a73;
  --ms-div-2: #8ebfc2;
  --ms-div-3: #e9e0cf;
  --ms-div-4: #e0a184;
  --ms-div-5: #a9442a;

  /* Elevation: paper on a table, never glow */
  --ms-shadow-card: 0 1px 0 rgba(36, 26, 19, 0.04), 0 14px 30px -22px rgba(60, 38, 20, 0.45);
  --ms-shadow-float: 0 18px 44px -18px rgba(36, 26, 19, 0.45);
  --ms-shadow-bar: 0 -10px 30px -18px rgba(36, 26, 19, 0.5);
  --ms-scrim: rgba(36, 26, 19, 0.55);

  /* Type */
  --ms-font-display: "Fraunces", ui-serif, serif;
  --ms-font-sans: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --ms-font-mono: ui-monospace, Consolas, "Liberation Mono", monospace;
  --ms-display-axes: "SOFT" 60, "WONK" 0;
  --ms-display-axes-italic: "SOFT" 100, "WONK" 1;
  --ms-fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);   /* 40 to 72: page title */
  --ms-fs-title: clamp(1.875rem, 1.45rem + 1.7vw, 2.75rem); /* 30 to 44: section title */
  --ms-fs-headline: clamp(1.375rem, 1.25rem + 0.55vw, 1.75rem); /* 22 to 28: panel title, big price */
  --ms-fs-card: 1.3125rem;                                    /* 21: card, plan, menu section title */
  --ms-fs-lede: 1.1875rem;                                    /* 19: lede, section intro */
  --ms-fs-body: 1.0625rem;                                    /* 17: body and menu items */
  --ms-fs-ui: 1rem;                                           /* 16: buttons, inputs, nav */
  --ms-fs-meta: 0.9375rem;                                    /* 15: meta, table, hints */
  --ms-fs-caption: 0.8125rem;                                 /* 13: tags, captions, labels */
  --ms-lh-display: 1.04;
  --ms-lh-title: 1.1;
  --ms-lh-snug: 1.3;
  --ms-lh-body: 1.6;
  --ms-track-display: -0.022em;
  --ms-track-title: -0.012em;
  --ms-track-label: 0.02em;
  --ms-weight-regular: 400;
  --ms-weight-medium: 500;
  --ms-weight-semibold: 600;
  --ms-weight-bold: 700;
  --ms-weight-display: 500;

  /* Space: 4px base */
  --ms-space-1: 4px;
  --ms-space-2: 8px;
  --ms-space-3: 12px;
  --ms-space-4: 16px;
  --ms-space-5: 24px;
  --ms-space-6: 32px;
  --ms-space-7: 48px;
  --ms-space-8: 64px;
  --ms-space-9: 96px;
  --ms-space-10: 128px;
  --ms-section-pad: clamp(3.5rem, 2.4rem + 4.4vw, 6rem);     /* 56 to 96 */

  /* Shape: shared by every preset */
  --ms-radius-btn: 10px;
  --ms-radius-input: 10px;
  --ms-radius-card: 14px;
  --ms-radius-panel: 12px;
  --ms-radius-tag: 6px;
  --ms-radius-pill: 999px;

  /* Layout */
  --ms-content: 1160px;
  --ms-narrow: 720px;
  --ms-gutter: 40px;
  --ms-nav-h: 72px;
  --ms-bar-h: 68px;

  /* Motion */
  --ms-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ms-dur-fast: 150ms;
  --ms-dur: 220ms;
  --ms-dur-slow: 420ms;
}

@media (max-width: 767px) {
  :root {
    --ms-gutter: 20px;
    --ms-nav-h: 64px;
  }
}

@media (max-width: 639px) {
  :root {
    --ms-fs-meta: 1rem;                                       /* no text under 16px on phones */
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ms-canvas: #17120e;
    --ms-surface: #201a15;
    --ms-surface-alt: #2a221c;
    --ms-inset: #1c1612;
    --ms-ink: #f7f0e5;
    --ms-body: #e6dccd;
    --ms-muted: #c6b8a5;
    --ms-rule: #362c24;
    --ms-rule-strong: #4c4036;
    --ms-control: #938270;
    --ms-leader: #6f604f;
    --ms-btn: #e3876a;
    --ms-btn-hover: #eea088;
    --ms-btn-ink: #1d120c;
    --ms-btn-line: #e3876a;
    --ms-link: #f2a88c;
    --ms-link-line: #a4583f;
    --ms-accent: #c3cd8a;
    --ms-accent-fill: #b3bf73;
    --ms-accent-on: #1b1f0c;
    --ms-accent-soft: #272b15;
    --ms-focus: #f2a88c;
    --ms-awning: #c4603f;
    --ms-awning-alt: #9e4a2f;
    --ms-band: #252d16;
    --ms-band-ink: #f8f1e3;
    --ms-band-body: #e1dac8;
    --ms-band-muted: #c6bfa7;
    --ms-band-rule: #424c2a;
    --ms-band-btn: #f8f1e3;
    --ms-band-btn-hover: #ffffff;
    --ms-band-btn-ink: #252d16;
    --ms-ok: #8fd28a;
    --ms-ok-soft: #18291a;
    --ms-ok-dot: #6cc067;
    --ms-warn: #f0c068;
    --ms-warn-soft: #2e2311;
    --ms-warn-dot: #e5a93a;
    --ms-danger: #ff9c8c;
    --ms-danger-soft: #331814;
    --ms-info: #8fd0d8;
    --ms-info-soft: #14282b;
    --ms-viz-1: #e8896a;
    --ms-viz-2: #5cb7bb;
    --ms-viz-3: #e2b54c;
    --ms-viz-4: #93b2e6;
    --ms-viz-5: #a9bd60;
    --ms-viz-6: #ecdfcc;
    --ms-seq-1: #3b241a;
    --ms-seq-2: #6c3b28;
    --ms-seq-3: #a2583b;
    --ms-seq-4: #d57e5d;
    --ms-seq-5: #f3b8a0;
    --ms-div-1: #5cb7bb;
    --ms-div-2: #2e5e61;
    --ms-div-3: #3b322a;
    --ms-div-4: #7c4733;
    --ms-div-5: #e8896a;
    --ms-shadow-card: 0 1px 0 rgba(0, 0, 0, 0.3), 0 16px 32px -22px rgba(0, 0, 0, 0.8);
    --ms-shadow-float: 0 18px 44px -16px rgba(0, 0, 0, 0.75);
    --ms-shadow-bar: 0 -10px 30px -16px rgba(0, 0, 0, 0.8);
    --ms-scrim: rgba(0, 0, 0, 0.65);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ms-canvas: #17120e;
  --ms-surface: #201a15;
  --ms-surface-alt: #2a221c;
  --ms-inset: #1c1612;
  --ms-ink: #f7f0e5;
  --ms-body: #e6dccd;
  --ms-muted: #c6b8a5;
  --ms-rule: #362c24;
  --ms-rule-strong: #4c4036;
  --ms-control: #938270;
  --ms-leader: #6f604f;
  --ms-btn: #e3876a;
  --ms-btn-hover: #eea088;
  --ms-btn-ink: #1d120c;
  --ms-btn-line: #e3876a;
  --ms-link: #f2a88c;
  --ms-link-line: #a4583f;
  --ms-accent: #c3cd8a;
  --ms-accent-fill: #b3bf73;
  --ms-accent-on: #1b1f0c;
  --ms-accent-soft: #272b15;
  --ms-focus: #f2a88c;
  --ms-awning: #c4603f;
  --ms-awning-alt: #9e4a2f;
  --ms-band: #252d16;
  --ms-band-ink: #f8f1e3;
  --ms-band-body: #e1dac8;
  --ms-band-muted: #c6bfa7;
  --ms-band-rule: #424c2a;
  --ms-band-btn: #f8f1e3;
  --ms-band-btn-hover: #ffffff;
  --ms-band-btn-ink: #252d16;
  --ms-ok: #8fd28a;
  --ms-ok-soft: #18291a;
  --ms-ok-dot: #6cc067;
  --ms-warn: #f0c068;
  --ms-warn-soft: #2e2311;
  --ms-warn-dot: #e5a93a;
  --ms-danger: #ff9c8c;
  --ms-danger-soft: #331814;
  --ms-info: #8fd0d8;
  --ms-info-soft: #14282b;
  --ms-viz-1: #e8896a;
  --ms-viz-2: #5cb7bb;
  --ms-viz-3: #e2b54c;
  --ms-viz-4: #93b2e6;
  --ms-viz-5: #a9bd60;
  --ms-viz-6: #ecdfcc;
  --ms-seq-1: #3b241a;
  --ms-seq-2: #6c3b28;
  --ms-seq-3: #a2583b;
  --ms-seq-4: #d57e5d;
  --ms-seq-5: #f3b8a0;
  --ms-div-1: #5cb7bb;
  --ms-div-2: #2e5e61;
  --ms-div-3: #3b322a;
  --ms-div-4: #7c4733;
  --ms-div-5: #e8896a;
  --ms-shadow-card: 0 1px 0 rgba(0, 0, 0, 0.3), 0 16px 32px -22px rgba(0, 0, 0, 0.8);
  --ms-shadow-float: 0 18px 44px -16px rgba(0, 0, 0, 0.75);
  --ms-shadow-bar: 0 -10px 30px -16px rgba(0, 0, 0, 0.8);
  --ms-scrim: rgba(0, 0, 0, 0.65);
}

/* Preset: clinic. Sage and calm blue-green for practitioners, physio, dental, wellness. */
:root[data-accent="clinic"] {
  --ms-btn: #1f6760;
  --ms-btn-hover: #17504b;
  --ms-btn-ink: #ffffff;
  --ms-btn-line: #1f6760;
  --ms-link: #18534e;
  --ms-link-line: #7fb1aa;
  --ms-accent: #344c3b;
  --ms-accent-fill: #4f6e58;
  --ms-accent-on: #ffffff;
  --ms-accent-soft: #e4ede4;
  --ms-focus: #18534e;
  --ms-awning: #5b8a77;
  --ms-awning-alt: #86ad9b;
  --ms-band: #173f3c;
  --ms-band-ink: #f1f7f4;
  --ms-band-body: #d3e3de;
  --ms-band-muted: #bfd5cf;
  --ms-band-rule: #2e5a56;
  --ms-band-btn: #f1f7f4;
  --ms-band-btn-hover: #ffffff;
  --ms-band-btn-ink: #173f3c;
}

@media (prefers-color-scheme: dark) {
  :root[data-accent="clinic"]:not([data-theme="light"]) {
    --ms-btn: #7fcabe;
    --ms-btn-hover: #9ad8cd;
    --ms-btn-ink: #0d1d1b;
    --ms-btn-line: #7fcabe;
    --ms-link: #93d6cb;
    --ms-link-line: #3f7f77;
    --ms-accent: #b3d0b9;
    --ms-accent-fill: #9dbfa5;
    --ms-accent-on: #10201a;
    --ms-accent-soft: #1e2c24;
    --ms-focus: #93d6cb;
    --ms-awning: #5b8a77;
    --ms-awning-alt: #3f6b5a;
    --ms-band: #12302e;
    --ms-band-ink: #f1f7f4;
    --ms-band-body: #d3e3de;
    --ms-band-muted: #b0cbc4;
    --ms-band-rule: #27504c;
    --ms-band-btn: #f1f7f4;
    --ms-band-btn-hover: #ffffff;
    --ms-band-btn-ink: #12302e;
  }
}

:root[data-accent="clinic"][data-theme="dark"] {
  --ms-btn: #7fcabe;
  --ms-btn-hover: #9ad8cd;
  --ms-btn-ink: #0d1d1b;
  --ms-btn-line: #7fcabe;
  --ms-link: #93d6cb;
  --ms-link-line: #3f7f77;
  --ms-accent: #b3d0b9;
  --ms-accent-fill: #9dbfa5;
  --ms-accent-on: #10201a;
  --ms-accent-soft: #1e2c24;
  --ms-focus: #93d6cb;
  --ms-awning: #5b8a77;
  --ms-awning-alt: #3f6b5a;
  --ms-band: #12302e;
  --ms-band-ink: #f1f7f4;
  --ms-band-body: #d3e3de;
  --ms-band-muted: #b0cbc4;
  --ms-band-rule: #27504c;
  --ms-band-btn: #f1f7f4;
  --ms-band-btn-hover: #ffffff;
  --ms-band-btn-ink: #12302e;
}

/* Preset: trades. Safety yellow fills behind charcoal text, charcoal bands. Yellow is never text. */
:root[data-accent="trades"] {
  --ms-btn: #f2c230;
  --ms-btn-hover: #e0ae12;
  --ms-btn-ink: #1d1c19;
  --ms-btn-line: #8a6a00;
  --ms-link: #2b2925;
  --ms-link-line: #d9a710;
  --ms-accent: #33312c;
  --ms-accent-fill: #33312c;
  --ms-accent-on: #f7f3ea;
  --ms-accent-soft: #f8e9b8;
  --ms-focus: #2b2925;
  --ms-awning: #f2c230;
  --ms-awning-alt: #262522;
  --ms-band: #262522;
  --ms-band-ink: #f7f4ec;
  --ms-band-body: #e0dcd1;
  --ms-band-muted: #c2bdb0;
  --ms-band-rule: #46443e;
  --ms-band-btn: #f2c230;
  --ms-band-btn-hover: #ffd34d;
  --ms-band-btn-ink: #1d1c19;
}

@media (prefers-color-scheme: dark) {
  :root[data-accent="trades"]:not([data-theme="light"]) {
    --ms-btn: #f5c842;
    --ms-btn-hover: #ffd75e;
    --ms-btn-ink: #171612;
    --ms-btn-line: #f5c842;
    --ms-link: #f3ede0;
    --ms-link-line: #d9a710;
    --ms-accent: #ece6d8;
    --ms-accent-fill: #ece6d8;
    --ms-accent-on: #1d1c19;
    --ms-accent-soft: #352d14;
    --ms-focus: #f5c842;
    --ms-awning: #f5c842;
    --ms-awning-alt: #1f1e1b;
    --ms-band: #1f1e1b;
    --ms-band-ink: #f7f4ec;
    --ms-band-body: #e0dcd1;
    --ms-band-muted: #c2bdb0;
    --ms-band-rule: #3d3b36;
    --ms-band-btn: #f5c842;
    --ms-band-btn-hover: #ffd75e;
    --ms-band-btn-ink: #171612;
  }
}

:root[data-accent="trades"][data-theme="dark"] {
  --ms-btn: #f5c842;
  --ms-btn-hover: #ffd75e;
  --ms-btn-ink: #171612;
  --ms-btn-line: #f5c842;
  --ms-link: #f3ede0;
  --ms-link-line: #d9a710;
  --ms-accent: #ece6d8;
  --ms-accent-fill: #ece6d8;
  --ms-accent-on: #1d1c19;
  --ms-accent-soft: #352d14;
  --ms-focus: #f5c842;
  --ms-awning: #f5c842;
  --ms-awning-alt: #1f1e1b;
  --ms-band: #1f1e1b;
  --ms-band-ink: #f7f4ec;
  --ms-band-body: #e0dcd1;
  --ms-band-muted: #c2bdb0;
  --ms-band-rule: #3d3b36;
  --ms-band-btn: #f5c842;
  --ms-band-btn-hover: #ffd75e;
  --ms-band-btn-ink: #171612;
}