/*
 * Shared brand tokens for all three variants: colour, type, spacing, buttons, placeholders.
 * Variants change message and layout, never these. (CLAUDE.md: "same brand, different angle")
 *
 * Palette: Central Texas limestone and charcoal, one bluebonnet-blue accent for actions.
 * Type: Zilla Slab (headlines, 400) + Rethink Sans (text). Pairing dealt by the Taste Skill
 * (start.mjs, "zilla"); colours set with start.mjs brand. Both fonts self-hosted (OFL).
 */

@font-face {
  font-family: "Zilla Slab";
  src: url("/shared/fonts/zilla-slab-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rethink Sans";
  src: url("/shared/fonts/rethink-sans-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour */
  --color-ground: #ece6da;      /* limestone: the page */
  --color-surface: #f7f3ec;     /* off-white: cards, forms */
  --color-stone: #e2dacb;       /* a step darker limestone: placeholder boxes, quiet bands */
  --color-ink: #24211c;         /* charcoal: text */
  --color-muted: #59534a;       /* labels and meta (4.5:1+ on ground and surface) */
  --color-line: #cfc6b5;        /* hairlines */
  --color-accent: #2b4c9b;      /* bluebonnet: the one action colour */
  --color-accent-hover: #233f83;
  --color-accent-ink: #ffffff;
  --color-accent-soft: #dfe3ec; /* tonal secondary button */
  --color-inverse: #24211c;     /* the one dark band */
  --color-inverse-surface: #302d27;
  --color-inverse-ink: #ece6da;
  --color-inverse-muted: #b3ac9f;
  --color-inverse-line: #4a463e;
  --color-error: #a3261b;

  /* Type */
  --font-display: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --font-body: "Rethink Sans", "Segoe UI", "Helvetica Neue", sans-serif;
  --display-weight: 400;
  --display-tracking: -0.018em;
  --t-h1: clamp(2.375rem, 1.6rem + 2.6vw, 3.75rem);   /* 38 → 60 */
  --t-h2: clamp(1.875rem, 1.45rem + 1.5vw, 2.75rem);  /* 30 → 44 */
  --t-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);    /* 20 → 24 */
  --t-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);  /* 17 → 20 */
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-label: 0.8125rem;

  /* Space (4-based) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;

  /* Layout */
  --wrap: 1280px;
  --gut: 24px;
  --nav: 56px;
  --bar: calc(64px + env(safe-area-inset-bottom));  /* phone Call / Book bar */

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --btn-h: 48px;
}
@media (min-width: 640px) {
  :root { --gut: 48px; --nav: 72px; --bar: 0px; }
}
@media (min-width: 1024px) {
  :root { --gut: 80px; }
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background: var(--color-ground);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
a { color: var(--color-accent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip { position: absolute; left: var(--gut); top: 8px; z-index: 20; }
.skip:not(:focus) { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---- Buttons: one primary (filled bluebonnet) and one tonal secondary ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-h);
  padding: 0 24px;
  border-radius: var(--radius-sm);
  border: 0;
  font: 500 1rem/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, transform 90ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-hover); }
.btn--secondary { background: var(--color-accent-soft); color: var(--color-ink); }
.btn--secondary:hover { background: #d3d9e6; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* Underline that draws on hover (text links) */
.link { color: var(--color-accent); font-weight: 500; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size 200ms ease; }
.link:hover { background-size: 100% 1.5px; }

/* ---- Placeholders (CLAUDE.md: never invent; mark every gap) ---- */
.ph-text { background: #fff3c4; color: #5a4300; padding: 0 4px; border-radius: 3px; font-style: normal; }
.ph-photo {
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(36, 33, 28, 0.045) 14px 28px),
    var(--color-stone);
  border: 2px dashed #a99f8c;
  border-radius: var(--radius-md);
  color: var(--color-muted);
  font: 500 var(--t-small)/1.4 var(--font-body);
  text-align: center;
  overflow: hidden;
}
.ph-photo span { max-width: 30ch; }
.ph-photo--dark {
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(236, 230, 218, 0.05) 14px 28px),
    var(--color-inverse-surface);
  border-color: #6c665a;
  color: var(--color-inverse-muted);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}