/* washmates — generated from tokens.json
   (.scratch/washmates-mvp/design/project/ds/washmates/tokens.json, in the EcoBrace workspace).
   HAND-MAINTAINED, keep across a regeneration (washmates-seo 16): the `@layer` order below and the
   four spacing-rhythm tokens (--gap-support, --flow-prose, --gap-heading, --gap-section). The four
   tokens are also in tokens.json (literal px there; here they alias --space-*), but the generator
   predates them and the `@layer` line is CSS-only, so check both survive before replacing this file. */
/*
 * Cascade layers (washmates-seo 16), declared here because tokens.css is the first sheet every page
 * links, so this line fixes the order for the whole site. Later layers beat earlier ones, and every
 * UNLAYERED rule (all component styles) beats every layer, whatever its specificity:
 *   prose  styles.css's default margins for plain prose on `.page` (privacy, about, 404).
 *   reset  guides.css's margin reset inside guides and service pages (`.guide p`, `.guide-body > *`).
 *   flow   the shared stack (`.flow`) and supporting-line (`[data-support]`) spacing, styles.css.
 * So a reset can never again silently zero a component's spacing (the washmates-seo 03 trap).
 */
@layer prose, reset, flow;
:root, [data-theme="teal"] {
  --surface: #0f3b3a; /* Page background. Teal is the brand ground for social, marketing and splash screens; light is the working ground for booking screens and forms. */
  --surface-raised: #164a47; /* Cards, sheets, input fields and the rooftop skyline sitting on surface. */
  --surface-sunken: #0b2e2d; /* Wells, selected rows, the track behind progress bars. */
  --rooftop: #164a47; /* Decorative rooftop skyline along the bottom edge of heroes and covers. Never behind text. */
  --ink: #ffffff; /* Headlines and body text on surface and surface-raised (11:1 teal, 11:1 light). Also the roof stroke of the logo mark. */
  --ink-muted: #cde8e2; /* Secondary text, captions, helper text on surface and surface-raised (9.5:1 teal, 6.6:1 light). */
  --border: #2a6663; /* Hairline dividers and resting card borders. Decorative only: never the sole outline of a control. */
  --border-strong: #7fb5ae; /* Input and control outlines at rest (3:1 against surface in both themes). */
  --aqua: #5cd6c8; /* THE brand accent. Fills: primary buttons, selected chips, the water drop in the logo, chip outlines on teal. Text in aqua only on the teal theme; on light use aqua-ink. */
  --aqua-ink: #5cd6c8; /* Accent-coloured TEXT and links: the 'mates' half of the wordmark, highlighted headline lines, inline links (6.9:1 on teal, 4.9:1 on light). */
  --on-aqua: #0f3b3a; /* Text and icons on an aqua fill (6.9:1). Never white on aqua. */
  --sun: #f5c542; /* The sparkle in the logo and small highlights: the web address on covers, star ratings, a 'new' dot. Text in sun only on the teal theme; on light it is a fill with on-sun text. */
  --on-sun: #0f3b3a; /* Text on a sun fill. */
  --success: #7be0a6; /* Job completed, payment received. Text and icons on surface. */
  --danger: #ff9b8a; /* Errors, failed payments, destructive actions. Text and icons on surface. */
  --focus-ring: #f5c542; /* Keyboard focus: a 3px ring offset 2px from the control, on every interactive element. */
  --shadow-sheet: 0 -8px 24px rgba(0, 0, 0, 0.35); /* Bottom sheets and sticky booking bars only. Cards stay flat. */
}
[data-theme="light"] {
  --surface: #f5faf9;
  --surface-raised: #ffffff;
  --surface-sunken: #e6f2f0;
  --rooftop: #d7eae7;
  --ink: #0f3b3a;
  --ink-muted: #3f5f5c;
  --border: #c5dcd8;
  --border-strong: #5e7f7b;
  --aqua: #5cd6c8;
  --aqua-ink: #0e7c70;
  --on-aqua: #0f3b3a;
  --sun: #f5c542;
  --on-sun: #0f3b3a;
  --success: #15803d;
  --danger: #b42318;
  --focus-ring: #0e7c70;
  --shadow-sheet: 0 -8px 24px rgba(15, 59, 58, 0.12);
}
:root {
  --space-1: 4px; /* Icon-to-text nudge, tight stacks. */
  --space-2: 8px; /* Inside chips and between label and field. */
  --space-3: 12px; /* Gap between chips and between stacked buttons. */
  --space-4: 16px; /* Screen side gutter on phones, input padding. */
  --space-6: 24px; /* Card padding, gap between blocks on a screen. */
  --space-8: 32px; /* Section gap inside a screen. */
  --space-12: 48px; /* Hero padding, gap between page sections on desktop. */
  /* Spacing rhythm (washmates-seo 16). Use these, not raw --space-* values, for vertical rhythm in
     guides, service pages and posts; README "Spacing" says how. */
  --gap-support: var(--space-3); /* 12px. A supporting line under the thing it belongs to: a note under a button, a caption or source line under a table or image, a VAT or small-print line under a figure, chips under their intro, the hours line under a list. Mark the element data-support; never set its margin by hand. */
  --flow-prose: var(--space-4); /* 16px. Paragraph to paragraph in running copy (a guide's Markdown body, plain .page prose). */
  --gap-heading: var(--space-3); /* 12px. A section heading to its first content (section H2s, the TOC label). In a guide's Markdown body the body's 16px flow applies instead. */
  --gap-section: var(--space-6); /* 24px. Block to block in a page column (breadcrumb, header, answer, CTA, body, closing sections), and the air under a section's hairline rule. */
  --radius-sm: 8px; /* Inputs, small tags. */
  --radius-md: 12px; /* Buttons. */
  --radius-lg: 20px; /* Cards, sheets, the app icon. */
  --radius-pill: 999px; /* Service chips and status pills. */
  --font-display: "Archivo Black", Impact, "Arial Black", sans-serif;
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-display-xl: 400 72px/0.95 var(--font-display); /* Cover and hero headlines. Always UPPERCASE. One line may switch to aqua-ink for emphasis. */
  --text-display-l: 400 50px/1.04 var(--font-display); /* Social covers, landing sections. UPPERCASE. */
  --text-display-m: 400 32px/1.05 var(--font-display); /* App screen titles and section heads. UPPERCASE. */
  --text-wordmark: 400 36px/1 var(--font-display); /* The brand name. Always lowercase 'washmates': 'wash' in ink, 'mates' in aqua-ink. Never in running text styled this way. */
  --text-title: 700 22px/28px var(--font-sans); /* Card titles, service names, sheet headers. */
  --text-body-l: 500 18px/26px var(--font-sans); /* Lead paragraphs, hero sublines. */
  --text-body: 400 16px/24px var(--font-sans); /* Default running text and form values. */
  --text-label: 700 15px/20px var(--font-sans); /* Buttons, chips, form labels, tabs. */
  --text-caption: 500 13px/18px var(--font-sans); /* Helper text, timestamps, fine print. In ink-muted. */
}
.display-xl {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: -2px;
}
.display-l {
  font-family: var(--font-display);
  font-size: 50px;
  line-height: 1.04;
  font-weight: 400;
  letter-spacing: -1px;
}
.display-m {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.5px;
}
.wordmark {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.5px;
}
.title {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0;
}
.body-l {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0;
}