/* ==================================================================
   VESTA HOME CARE: design-system layer for the form, thank-you and
   Terms pages. Loaded AFTER each page's own <style>, so it maps the
   old variable names onto design-system tokens and overrides the
   components that broke the system (pill buttons, shadows, ember
   buttons, low-contrast greys, hidden focus).
   Values: vesta-design-system section 3.
   ================================================================== */
@font-face{ font-family:"Marcellus"; font-weight:400; font-display:swap; src:url(/assets/fonts/marcellus-400.woff2) format("woff2"); }
@font-face{ font-family:"Karla"; font-weight:400; font-style:normal; font-display:swap; src:url(/assets/fonts/karla-400.woff2) format("woff2"); }
@font-face{ font-family:"Karla"; font-weight:400; font-style:italic; font-display:swap; src:url(/assets/fonts/karla-400-italic.woff2) format("woff2"); }
@font-face{ font-family:"Karla"; font-weight:500; font-display:swap; src:url(/assets/fonts/karla-500.woff2) format("woff2"); }
@font-face{ font-family:"Karla"; font-weight:600; font-display:swap; src:url(/assets/fonts/karla-600.woff2) format("woff2"); }
@font-face{ font-family:"Karla"; font-weight:700; font-display:swap; src:url(/assets/fonts/karla-700.woff2) format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-weight:400; font-display:swap; src:url(/assets/fonts/plexmono-400.woff2) format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-weight:500; font-display:swap; src:url(/assets/fonts/plexmono-500.woff2) format("woff2"); }

:root{
  color-scheme: light dark;
  --page:#E6E3DC; --card:#FFFFFF; --card-2:#E6E3DC; --field:#FFFFFF;
  --rule:#5A574B; --rule-2:#D3CEC2;
  --ink:#201F1B; --ink-mid:#5A574B; --ink-soft:#5A574B; --ember:#7D4A17;
  --hearth:#201F1B; --hearth-2:#201F1B; --hearth-ink:#E6E3DC; --hearth-mid:#8A877C; --hearth-rule:#3A3830; --flame:#D99A45;
  --shadow:none; --shadow-lift:none; --r:8px; --r-sm:4px;
  --btn-bg:#201F1B; --btn-fg:#E6E3DC; --focus:#201F1B; --error:#9E3B2C;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:#201F1B; --card:#201F1B; --card-2:#201F1B; --field:#1A1916;
    --rule:#8A877C; --rule-2:#3A3830;
    --ink:#E6E3DC; --ink-mid:#8A877C; --ink-soft:#8A877C; --ember:#D99A45;
    --shadow:none; --shadow-lift:none;
    --btn-bg:#D99A45; --btn-fg:#201F1B; --focus:#D99A45; --error:#E8927F;
    --stone:#1A1916; --stone-2:#201F1B;
  }
}
:root[data-theme="dark"]{
  --page:#201F1B; --card:#201F1B; --card-2:#201F1B; --field:#1A1916;
  --rule:#8A877C; --rule-2:#3A3830;
  --ink:#E6E3DC; --ink-mid:#8A877C; --ink-soft:#8A877C; --ember:#D99A45;
  --shadow:none; --shadow-lift:none;
  --btn-bg:#D99A45; --btn-fg:#201F1B; --focus:#D99A45; --error:#E8927F;
  --stone:#1A1916; --stone-2:#201F1B;
}

body{ font-size:1.0625rem; }
h1,h2,h3{ font-synthesis:none; letter-spacing:.02em; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:4px; }
.bar :focus-visible, .mast :focus-visible{ outline-color:#D99A45; }
.skip{ position:absolute; left:1rem; top:-3rem; z-index:100; background:var(--btn-bg); color:var(--btn-fg);
       padding:.5rem 1rem; border-radius:4px; text-decoration:none; font-weight:600; }
.skip:focus{ top:.75rem; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* cards: an edge you can see instead of a shadow */
fieldset, .done, .steps div, .steps .st{ border:1px solid var(--rule); box-shadow:none; }

/* type sizes up to the system (body 17px, labels 14px+) */
.intro .sub, .sub{ font-size:1.0625rem; }
.steps span, .hint, .reassure, .f .sub, .cnote, .ex p, .catchall, .pricenote, .note{ font-size:1rem; }
.steps b, .eyebrow, .label{ font-size:.875rem; }
.eyebrow, .label{ color:var(--ink-mid); }
footer p{ font-size:.875rem; color:var(--ink-mid); }

/* buttons: Slate with Limestone text (Flame with Slate text in dark) */
button{ background:var(--btn-bg); color:var(--btn-fg); border-radius:4px; box-shadow:none; min-height:2.75rem; }
button:hover{ background:var(--btn-bg); filter:brightness(1.12); box-shadow:none; transform:none; }
button:focus-visible{ box-shadow:none; outline:2px solid var(--focus); outline-offset:3px; }
button[disabled]{ opacity:.6; cursor:progress; }
.theme{ background:transparent; color:#E6E3DC; border:1px solid #8A877C; border-radius:4px; width:2.75rem; height:2.75rem; min-height:0; filter:none; }
.theme:hover{ background:transparent; border-color:#D99A45; filter:none; }

/* form controls: 3:1 edges, visible focus */
.f input, .f select, .f textarea, .radios label{ border-color:var(--rule); border-radius:4px; }
.f input:focus, .f select:focus, .f textarea:focus{ border-color:var(--focus); box-shadow:0 0 0 2px var(--focus); }
.radios label:has(input:checked){ border-color:var(--ink); background:transparent; box-shadow:0 0 0 1px var(--ink); }
.radios input, .chk input{ accent-color:var(--ink); }
.chk input{ width:1.5rem; height:1.5rem; }
.req{ color:var(--error); }
.f input:user-invalid, .f input[aria-invalid="true"], .f textarea[aria-invalid="true"], .f select[aria-invalid="true"]{ border-color:var(--error); }
.err{ color:var(--error); font-size:1rem; }
.note{ border-left-color:var(--ink); }

/* links */
footer a, .reassure a, .contact a{ color:var(--ember); text-decoration:underline; text-underline-offset:.18em; border-bottom:0; }

/* the honeypot is fully removed from view, focus and autofill */
.hp{ display:none !important; }

/* upload progress (first room) */
.upload-status{ font-size:1rem; color:var(--ink); min-height:1.5em; }

/* utility classes (replace inline style attributes) */
.sprite{ position:absolute; }
a.home{ text-decoration:none; color:inherit; display:inline-flex; }
.stack{ display:flex; flex-direction:column; gap:.7rem; }
.gap-l{ margin-top:1rem; } .gap-s{ margin-top:.4rem; }

/* labels on the Slate header of the thank-you pages */
.mast .label, .mast .eyebrow{ color:#8A877C; }

/* first room photo tiles: no tint behind small text (contrast), edge instead */
.drop{ background:transparent; border-color:var(--rule); }
.drop:hover, .drop:focus-within{ background:transparent; border-color:var(--ink); box-shadow:none; }

/* thank-you steps: separate cards, one edge each (no doubled rules) */
.steps:has(.st){ gap:.75rem; background:transparent; border:0; }
.steps .st{ background:transparent; border-radius:4px; }

/* light is the default theme (Lochlan, 2 Oct 2026); dark via the toggle */
:root[data-theme="dark"]{ color-scheme:dark; }
:root[data-theme="light"]{ color-scheme:light; }

/* links inside the long-form pages (Terms, Privacy, content terms) */
.sheet p a, .sheet li a, .sheet dd a{ color:var(--ember); text-decoration:underline; text-underline-offset:.18em; }