/* base.css — design tokens + reset. Loaded on every page. */

:root {
  /* Colors */
  --color-accent: #E70D0D;
  --color-white: #FFFFFF;
  --color-grey-100: #f9f9f9;
  --color-grey-200: #f3f3f3;
  --color-grey-400: #e7e7e7;
  --color-grey-500: #cecece;
  --color-grey-600: #747474;
  --color-grey-700: #4e4e4e;
  --color-grey-800: #272727;
  --color-grey-900: #0d0d0d;
  --color-black: #0a0a0a;
  --color-red-100: #facfcf;
  --color-red-900: #450404;
  /* Links inside editor-authored copy. Client asked for body-text colour instead
     of the previous maroon (#B00A0A), so links are told apart by the underline
     alone — see layout.css, where they always carry text-decoration: underline
     and thicken it on hover. Keep both tokens pointing at text colour: never
     --color-accent, which means "error" (.udi-form__req, .wpcf7-not-valid). */
  --color-link: var(--color-grey-900);
  --color-link-hover: var(--color-grey-900);

  /* Inline icon (verbatim Figma icon/arrow/right) for CSS list markers — used as a mask, tinted with currentColor. */
  --icon-arrow-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.5 12H14.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.5 15L15.5 12L12.5 9' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Spacing scale (px tokens from Figma) */
  --space-3xs: 4px;
  --space-2x: 8px;
  --space-xs: 12px;
  --space-s: 16px;
  --space-m: 20px;
  --space-l: 24px;
  --space-xl: 28px;
  --space-2xl: 36px;
  --space-3xl: 48px;
  --space-4xl: 56px;
  --space-5xl: 64px;
  --space-6xl: 96px;

  /* Radius */
  --radius-xs: 2px;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-pill: 999px;

  /* Typography families */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Type scale (font-size / line-height) */
  --fs-h-xl: 64px;   --lh-h-xl: 72px;   --ls-h-xl: -2px;
  --fs-h-l: 40px;    --lh-h-l: 40px;    --ls-h-l: -2px;
  --fs-h-m: 32px;    --lh-h-m: 40px;    --ls-h-m: -1px;
  --fs-body-m: 16px; --lh-body-m: 28px;
  --fs-body-s: 14px; --lh-body-s: 28px;
  --fs-caption: 12px; --lh-caption: 24px; --ls-caption: 0.4px;

  /* Layout */
  --container-max: 1300px;
  --gutter: 20px;
  --header-h: 76px;
}
/* Mobile: compact header (client: max 64px). Everything sized off the var
   (navbar min-height, mobile-nav inset) follows automatically. */
@media (max-width: 600px) {
  :root { --header-h: 64px; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--color-grey-900);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Sticky footer: short pages (e.g. a category with few treatments) must not
     leave white space below the footer. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
.site-main { flex: 1 0 auto; }
img, picture, video { display: block; max-width: 100%; height: auto; }
svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: normal;
}
em, i { font-style: italic; }

/* Heading utility classes (match Figma type styles) */
.h-xl { font-family: var(--font-heading); font-weight: 400; font-size: var(--fs-h-xl); line-height: var(--lh-h-xl); letter-spacing: var(--ls-h-xl); }
.h-l  { font-family: var(--font-heading); font-weight: 400; font-size: var(--fs-h-l);  line-height: var(--lh-h-l);  letter-spacing: var(--ls-h-l); }
.h-m  { font-family: var(--font-heading); font-weight: 400; font-size: var(--fs-h-m);  line-height: var(--lh-h-m);  letter-spacing: var(--ls-h-m); }
.eyebrow { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); }

/* Accessibility helpers */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--color-grey-900); color: #fff;
  padding: var(--space-2x) var(--space-s); border-radius: var(--radius-s);
}
.skip-link:focus { left: var(--space-s); top: var(--space-s); }

/* Client: black focus ring site-wide (the red one read as an error state on
   carousel arrows and form fields). */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-grey-900);
  outline-offset: 2px;
}

/* Mobile type scale: H2-level headings (h-l consumers: article H2s, section
   headings) drop to 32px — client request, keeps them below the scaled-down H1s. */
@media (max-width: 600px) {
  :root { --fs-h-l: 32px; --lh-h-l: 40px; --ls-h-l: -1px; }
  /* Every page H1 is 40px on mobile (client request). The attribute selector
     (0,1,1) outranks each section's single-class H1 rule (.hero__heading,
     .pricing__title, .ba-page__title, …), so this one line is the single source
     of truth — no need to touch every section. */
  h1[class] { font-size: 40px; line-height: 48px; letter-spacing: -1px; }
}