/* ============================================================
   Me & Mew — shared brand foundation
   Used by all three design variations + the chooser page.
   Tokens come straight from DESIGN.md; cream is sampled from
   the logo PNG (#FBF1E8) so the inlined logo blends seamlessly.
   ============================================================ */

:root{
  /* ---- brand colour ---- */
  --teal:#00838F;          /* primary  */
  --teal-soft:#0F8B8D;
  --teal-deep:#006A74;     /* darker, for AA text on cream */
  --teal-tint:#E4EEED;     /* soft panel */
  --teal-tint-2:#D2E6E4;

  --brown:#5C3A21;         /* secondary */
  --brown-soft:#6B4A32;
  --brown-ink:#3E2817;     /* body text */

  --cream:#FBF1E8;         /* page bg — matches logo */
  --cream-deep:#F4E7D6;
  --card:#FFFCF8;          /* cards */
  --line:#EADFCF;          /* hairlines */

  --peach:#FFC8A1;         /* divider paw + warm accent (her choice) */
  --peach-soft:#FFE2CD;

  /* ---- type ---- */
  --font-head:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:"Nunito Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-script:"Sacramento","Brush Script MT",cursive;

  /* ---- shape ---- */
  --maxw:1120px;
  --radius:18px;
  --radius-lg:30px;
  --radius-pill:999px;
  --shadow-sm:0 10px 24px -18px rgba(60,40,23,.45);
  --shadow:0 22px 48px -28px rgba(60,40,23,.40);

  /* illustration defaults (overridable per-instance) */
  --il-bg:var(--cream);
  --il-stroke:var(--brown);
  --sw:3.2;
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  overflow-x:clip; /* safety net against accidental horizontal scroll; keeps sticky working */
  background:var(--cream);
  color:var(--brown-ink);
  font-family:var(--font-body);
  font-size:clamp(16px,1rem + .15vw,18px);
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-deep);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--teal);font-weight:600;line-height:1.08;margin:0 0 .4em;letter-spacing:.005em}
h1{font-size:clamp(2.6rem,6vw,4.2rem)}
h2{font-size:clamp(2rem,4.4vw,3rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.6rem)}
p{margin:0 0 1rem}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
::selection{background:var(--peach);color:var(--brown-ink)}

/* the "Cat Sitting" service-line look from the brief */
.eyebrow{
  font-family:var(--font-head);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.34em;
  color:var(--brown-soft);
  font-size:.92rem;
  margin:0 0 .6rem;
}
.script{font-family:var(--font-script);color:var(--teal);font-weight:400;line-height:.9}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--teal);--fg:#fff;
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-body);font-weight:700;font-size:1rem;
  background:var(--bg);color:var(--fg);
  padding:.85em 1.6em;border-radius:var(--radius-pill);
  border:2px solid var(--bg);text-decoration:none;cursor:pointer;
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
  box-shadow:var(--shadow-sm);
}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:1.15em;height:1.15em}
.btn--ghost{--bg:transparent;--fg:var(--brown);border-color:var(--brown-soft);box-shadow:none}
.btn--ghost:hover{background:var(--brown);--fg:#fff}
.btn--peach{--bg:var(--peach);--fg:var(--brown-ink);border-color:var(--peach)}

/* ---------- the paw divider (logo motif, paw recoloured peach) ---------- */
.paw-divider{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 auto;width:min(420px,72%);color:var(--brown-soft)}
.paw-divider::before,.paw-divider::after{content:"";flex:1;height:2px;background:currentColor;opacity:.55;border-radius:2px}
.paw-divider svg{width:30px;height:30px;flex:none}

/* ---------- illustration classes (inline SVG) ----------
   stroke-width inherits from the <svg stroke-width="…"> attribute.
   --il-bg lets a cat's "cream fill" match the surface it sits on:
   on a white card, wrap with style="--il-bg:var(--card)". */
.il-fill{fill:var(--il-bg);stroke:var(--il-stroke);stroke-linejoin:round;stroke-linecap:round}
.il-line{fill:none;stroke:var(--il-stroke);stroke-linecap:round;stroke-linejoin:round}
.il-thin{fill:none;stroke:var(--il-stroke);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.il-peach{fill:var(--peach);stroke:none}
.il-brown{fill:var(--il-stroke);stroke:none}
.il-teal{fill:var(--teal);stroke:none}

/* ---------- small shared helpers ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tealtint{background:var(--teal-tint)}
.lead{font-size:1.18rem;color:var(--brown-soft)}

/* gentle reveal — only hides content when JS is on (html.js) AND motion is allowed,
   so the page is fully visible if JS fails or reduced motion is requested */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
  html.js .reveal.in{opacity:1;transform:none}
}