/* ===== 01-colors.css ===== */
/* ============================================================
   Breezz Health — Colour tokens
   One token layer, two registers. Colour is applied as SCHEMES
   (ground + text + border + button switching together), never as
   a loose palette. Every foreground is contrast-verified against
   all five warm grounds; the worst case is Sand 4.
   ============================================================ */

:root, [data-theme="light"] {
  /* --- Warm grounds (there is no single page background) --- */
  --bone:   #FFFDFA; /* cards, modals, lightest surface */
  --sand-1: #F7F3ED; /* default page ground */
  --sand-2: #F0EBE1; /* alternating section ground */
  --sand-3: #E8E1D4; /* emphasis sections, inset panels */
  --sand-4: #DCD3C3; /* deepest — pull quotes, footer */

  /* --- Foregrounds (worst case = Sand 4) --- */
  --ink:            #1C1917; /* headings, vitals values — 11.78:1 */
  --ink-secondary:  #57534E; /* labels, supporting text — 5.14:1 */
  --ink-muted:      #5E5852; /* timestamps, units — floor 4.73:1 */
  --slate-indigo:   #35435F; /* brand accent, CTAs, active, focus — 6.68:1 */
  --on-accent:      #FFFFFF; /* text on indigo fills — 9.91:1 */
  --border:         #6B645B; /* dividers, input borders — 3.93:1 (deliberately dark) */
  --terracotta:     #C25E3E; /* MARKETING ONLY — fills & large display, fails as text */
  --clay:           #8C4327; /* product-safe warm sibling of terracotta — passes as text on all grounds */

  /* --- Status foregrounds + their tinted tile grounds --- */
  /* Status text ALWAYS sits on its own tinted tile, never loose on sand. */
  --status-normal-fg:      #15803D;
  --status-normal-ground:  #EDF5EE;
  --status-critical-fg:    #B91C1C;
  --status-critical-ground:#FBEDEA;
  --status-warning-fg:     #B45309;
  --status-warning-ground: #FEF6EC;
  --status-nodata-fg:      #5E5852; /* no data / no threshold — sits on any ground */
  --status-nodata-ground:  var(--sand-2);

  /* --- Focus ring --- */
  --focus-ring: var(--slate-indigo);
  --focus-ring-offset: var(--bone);

  /* ============================================================
     Semantic aliases (register-neutral)
     ============================================================ */
  --text-strong:    var(--ink);
  --text-secondary: var(--ink-secondary);
  --text-muted:     var(--ink-muted);
  --accent:         var(--slate-indigo);
  --surface-card:   var(--bone);
  --divider:        var(--border);

  /* Emphasis/deep schemes' button — Bone/ink in light; re-pointed to the accent
     in dark (see dark.css) so the CTA stays prominent on the darker grounds. */
  --emphasis-btn-bg:   var(--bone);
  --emphasis-btn-text: var(--ink);

  /* Danger button fill — a solid red kept dark enough for white text in BOTH
     themes (never the light status foreground). White-on-fill 6.47:1 here. */
  --danger-solid: #B91C1C;
  --on-danger:    #FFFFFF;
}

/* ============================================================
   Colour schemes — apply as a class on a section/surface.
   Ground, text, border and button switch together as a set.
   `--ground` is the section background; `--btn-*` is the
   scheme's primary button.
   ============================================================ */
.scheme-bone {
  --ground: var(--bone);
  --scheme-border: var(--border);
  --btn-bg: var(--slate-indigo);
  --btn-text: var(--on-accent);
  background: var(--ground);
  color: var(--text-strong);
}
.scheme-default {
  --ground: var(--sand-1);
  --scheme-border: var(--border);
  --btn-bg: var(--slate-indigo);
  --btn-text: var(--on-accent);
  background: var(--ground);
  color: var(--text-strong);
}
.scheme-raised {
  --ground: var(--sand-2);
  --scheme-border: var(--border);
  --btn-bg: var(--slate-indigo);
  --btn-text: var(--on-accent);
  background: var(--ground);
  color: var(--text-strong);
}
.scheme-emphasis {
  --ground: var(--sand-3);
  --scheme-border: var(--border);
  --btn-bg: var(--emphasis-btn-bg);
  --btn-text: var(--emphasis-btn-text);
  background: var(--ground);
  color: var(--text-strong);
}
.scheme-deep {
  --ground: var(--sand-4);
  --scheme-border: var(--border);
  --btn-bg: var(--emphasis-btn-bg);
  --btn-text: var(--emphasis-btn-text);
  background: var(--ground);
  color: var(--text-strong);
}

/* ===== 02-typography.css ===== */
/* ============================================================
   Breezz Health — Typography tokens
   Body/UI: Atkinson Hyperlegible Next (disambiguates 1/l/I,
   6/8/9 — a safety requirement for vitals). Headlines: Source
   Serif 4 (the fastest signal that this is not a medical device).
   Two unrelated families kept at clearly different jobs & sizes.
   Numerals: Atkinson ships tabular figures — use tabular-nums
   for any vitals column; Atkinson Hyperlegible Mono is the
   monospace numeral fallback.
   ============================================================ */

:root {
  --font-serif: 'Source Serif 4', Charter, Georgia, 'Times New Roman', serif;
  --font-sans:  'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'Atkinson Hyperlegible Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Mono', monospace;

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* Line heights */
  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  /* Tracking */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-label:  0.04em; /* eyebrow / caps labels */

  /* ---------- Elder register (wearer's view) ----------
     One thing per screen. 20px body floor. */
  --elder-display: 40px;
  --elder-h1:      32px;
  --elder-h2:      26px;
  --elder-vitals:  40px;
  --elder-body:    20px;
  --elder-label:   17px;
  --elder-caption: 16px; /* absolute floor — nothing below this on elder */

  /* ---------- Family / staff register ----------
     Grids, trends, history. 16px body floor. */
  --fam-display: 44px;
  --fam-h1:      32px;
  --fam-h2:      24px;
  --fam-vitals:  28px;
  --fam-body:    16px;
  --fam-label:   14px;
  --fam-caption: 13px; /* absolute floor for the whole system — nothing below 13px anywhere */
}

/* Tabular figures for anything that aligns numerically (vitals columns, tables). */
.tabular-nums { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ===== 03-spacing.css ===== */
/* ============================================================
   Breezz Health — Spacing, radius & sizing tokens
   Touch targets are a hard floor: 48×48 minimum with 8px
   separation, on BOTH registers, no exceptions for density.
   ============================================================ */

:root {
  /* Spacing scale (4px base) */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Radius */
  --radius-card:   16px;
  --radius-button: 12px;
  --radius-input:  12px;
  --radius-modal:  24px;
  --radius-badge:  999px; /* full */
  --radius-tile:   16px;

  /* Touch targets — floor for interactive elements */
  --touch-min: 48px;
  --touch-gap: 8px;

  /* Register-specific control sizing */
  --elder-control-h: 64px; /* generous elder targets */
  --fam-control-h:   48px; /* family floor */

  /* Icon sizing — never smaller than the text an icon labels */
  --icon-elder:  32px; /* min on elder surface */
  --icon-family: 24px; /* min on family surface */
  --icon-inline: 20px;

  /* Layout */
  --container-narrow: 480px;
  --container-app:    440px;
  --container-web:    1200px;
  --sidebar-w:        264px;
}

/* ===== 04-elevation.css ===== */
/* ============================================================
   Breezz Health — Elevation tokens
   Shadows are warm-tinted (ink, low alpha), never neutral grey,
   so they sit naturally on the sand grounds. Elevation is soft
   and quiet — this is not a dashboard that shouts.
   ============================================================ */

:root {
  --shadow-none: none;
  --shadow-xs:   0 1px 2px rgba(28, 25, 23, 0.05);
  --shadow-card: 0 1px 2px rgba(28, 25, 23, 0.05), 0 6px 16px rgba(28, 25, 23, 0.06);
  --shadow-raised: 0 2px 4px rgba(28, 25, 23, 0.06), 0 12px 28px rgba(28, 25, 23, 0.08);
  --shadow-modal:  0 8px 20px rgba(28, 25, 23, 0.12), 0 32px 64px rgba(28, 25, 23, 0.18);
  --shadow-focus:  0 0 0 3px rgba(53, 67, 95, 0.35); /* slate-indigo focus halo */

  /* Hairline inset used on tiles/inputs for a crisp warm edge */
  --ring-hairline: inset 0 0 0 1px rgba(107, 100, 91, 0.5); /* @kind shadow */
}

/* ===== 05-motion.css ===== */
/* ============================================================
   Breezz Health — Motion tokens
   No motion under 150ms anywhere. The elder surface settles
   (300ms+) rather than snapping; the family surface is brisk
   (150ms). Nothing essential is conveyed by animation alone,
   and prefers-reduced-motion is always respected.
   ============================================================ */

:root {
  /* Durations (ms) */
  --motion-instant: 0ms; /* @kind other */
  --motion-fast:    150ms; /* @kind other */
  --motion-base:    200ms; /* @kind other */
  --motion-slow:    260ms; /* @kind other */
  --motion-elder:   320ms; /* @kind other */
  --motion-elder-lg:420ms; /* @kind other */

  /* Easing curves */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-settle:   cubic-bezier(0.16, 0.84, 0.24, 1); /* @kind other */
  --ease-enter:    cubic-bezier(0.0, 0.0, 0.2, 1); /* @kind other */
  --ease-exit:     cubic-bezier(0.4, 0.0, 1, 1); /* @kind other */

  /* Register-neutral aliases resolved by the component's register */
  --motion-ui:   var(--motion-fast); /* @kind other */
  --motion-ease: var(--ease-standard); /* @kind other */
}

/* Elder register scopes swap the motion aliases to settling timing. */
.register-elder {
  --motion-ui:   var(--motion-elder);
  --motion-ease: var(--ease-settle);
}
.register-family {
  --motion-ui:   var(--motion-fast);
  --motion-ease: var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 1ms; /* @kind other */
    --motion-base: 1ms; /* @kind other */
    --motion-slow: 1ms; /* @kind other */
    --motion-elder: 1ms; /* @kind other */
    --motion-elder-lg: 1ms; /* @kind other */
  }
}

/* ===== 06-dark.css ===== */
/* ============================================================
   Breezz Health — Dark mode (WARM darks)
   A warm light ground paired with a cold slate dark reads as two
   different brands. So dark mode gets its own warm ground scale
   and mirrored schemes — brown-blacks, not slate. Colour
   semantics, shape and iconography are identical to light; only
   the ground scale and foreground values change.

   Every dark foreground is re-verified against every dark ground
   (worst case = Sand 4 / deepest). Activate with
   [data-theme="dark"] on <html> or any subtree.

   NOTE (marketing site): this block keys off [data-theme="dark"]
   only — never prefers-color-scheme — and nothing on the site
   sets that attribute. It is therefore inert here, and kept only
   so the stylesheet stays a faithful copy of the design system.
   The approved marketing pages are the light register.
   ============================================================ */

[data-theme="dark"] {
  /* --- Warm dark grounds (lightest surface -> deepest) --- */
  --bone:   #26201A; /* cards, modals, lightest surface */
  --sand-1: #1E1915; /* default page ground */
  --sand-2: #191410; /* alternating section ground */
  --sand-3: #140F0C; /* emphasis sections, inset panels */
  --sand-4: #0E0A08; /* deepest — footer, scrim */

  /* --- Foregrounds (worst case = deepest dark ground) --- */
  --ink:            #F4EEE3; /* headings, vitals values */
  --ink-secondary:  #CDC4B6; /* labels, supporting text */
  --ink-muted:      #ABA192; /* timestamps, units — floor */
  --slate-indigo:   #A6B8DB; /* brand accent lifts to a warm periwinkle for dark */
  --on-accent:      #1A1510; /* text on the (now light) indigo fill */
  --border:         #847A67; /* warm divider — 3.80:1 worst case (UI boundary) */
  --terracotta:     #E4926C; /* marketing only */
  --clay:           #E9A683; /* product-safe warm accent text on dark grounds */

  --focus-ring: var(--slate-indigo);
  --focus-ring-offset: var(--sand-1);

  /* --- Status: lighter foregrounds on deep tinted tiles --- */
  --status-normal-fg:      #6FCE90;
  --status-normal-ground:  #16241A;
  --status-critical-fg:    #F1928C;
  --status-critical-ground:#2C1613;
  --status-warning-fg:     #E3AC57;
  --status-warning-ground: #281B0E;
  --status-nodata-fg:      #ABA192;
  --status-nodata-ground:  var(--sand-2);

  /* Semantic aliases re-point automatically via var() indirection */
  --surface-card: var(--bone);
  --divider: var(--border);

  /* Emphasis/deep buttons lift to the accent in dark so the CTA stays prominent
     on the darker grounds (mirrors light, where they are Bone/ink). */
  --emphasis-btn-bg:   var(--slate-indigo);
  --emphasis-btn-text: var(--on-accent);

  /* Danger fill brightens for presence on dark grounds while keeping white text
     legible — white 4.91:1, and 3.28:1+ against the surrounding dark grounds. */
  --danger-solid: #CE3A31;
  --on-danger:    #FFFFFF;

  /* Warm dark shadows lean deeper + darker to read on near-black grounds */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.5);
  --shadow-raised: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.55);
  --shadow-modal:  0 8px 20px rgba(0, 0, 0, 0.5), 0 32px 64px rgba(0, 0, 0, 0.65);
  --shadow-focus:  0 0 0 3px rgba(166, 184, 219, 0.4);
  --ring-hairline: inset 0 0 0 1px rgba(132, 122, 103, 0.6); /* @kind shadow */
}

/* ===== 07-base.css ===== */
/* ============================================================
   Breezz marketing site — shared base
   The rules the two pages hold in common. Copied byte-for-byte
   from the <style> preamble both Claude Design pages carried.

   Page-specific responsive rules (.bz-vitals, .bz-featurerow on
   home; .bz-three, .bz-compare, .bz-pilotform on elder homes)
   deliberately stay in their own page's <style> block — they name
   classes that exist on exactly one page, so hoisting them here
   would just be dead CSS on the other.
   ============================================================ */

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--sand-1); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: var(--slate-indigo); text-decoration-color: rgba(53,67,95,0.35); text-underline-offset: 3px; }
a:hover { color: var(--ink); text-decoration-color: currentColor; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
details[open] .bz-faq-plus { transform: rotate(45deg); }
::selection { background: rgba(194,94,62,0.22); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ------------------------------------------------------------
   Nav shell.

   The design carried the header's appearance as an inline style, and the two
   pages needed different ones: home sits transparent over the dark hero and
   solidifies on scroll, while elder homes has no dark hero and is pinned from
   first paint. That is styling, not structure, so it keys off body[data-nav]
   here rather than forking the shared partial.
   ------------------------------------------------------------ */
#bz-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }

[data-nav="hero"] #bz-nav {
  background: transparent;
  border-bottom: 1px solid transparent;
  color: #FFFDFA;
  transition: background 240ms cubic-bezier(0.2,0.8,0.3,1), box-shadow 240ms ease, border-color 240ms ease;
}
[data-nav="hero"] #bz-nav.is-pinned {
  background: rgba(255,253,250,0.93);
  backdrop-filter: saturate(1.1) blur(14px);
  border-bottom-color: rgba(107,100,91,0.28);
  color: var(--ink);
}
[data-nav="solid"] #bz-nav {
  background: rgba(255,253,250,0.93);
  backdrop-filter: saturate(1.1) blur(14px);
  border-bottom: 1px solid rgba(107,100,91,0.28);
  color: var(--ink);
}

/* Menu is closed until the burger opens it. */
#bz-menu[data-open="false"] { display: none; }

/* Nav + footer responsive behaviour — shared, since both are shared partials.
   These appeared identically in both pages' <style> blocks in the design. */
@media (max-width: 1080px) {
  .bz-navlinks a { padding-left: 9px !important; padding-right: 9px !important; font-size: 14px !important; }
}
@media (max-width: 900px) {
  .bz-footgrid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 860px) {
  .bz-navlinks { display: none !important; }
  .bz-burger { display: inline-flex !important; }
}
@media (max-width: 680px) {
  .bz-navcta { display: none !important; }
  .bz-footgrid { grid-template-columns: minmax(0,1fr) !important; }
  section, footer { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ------------------------------------------------------------
   Icons. Replaces the design system's <x-import … Icon> component
   with a <use> against the inline sprite. stroke="currentColor"
   on each symbol is what preserves the original colour inheritance.
   ------------------------------------------------------------ */
.ico { display: inline-block; vertical-align: middle; flex: none; }

/* ------------------------------------------------------------
   Logo over the hero.
   The design shipped two PNGs — logo.png (slate) and logo-bone.png
   (light, for over the dark hero) — and swapped the src on scroll.
   The mark is a single flat colour on a transparent ground, so the
   light variant is derivable with a filter. One asset instead of
   two: ~190KB less to download, and no flash of the wrong logo
   while the second image loads.
   ------------------------------------------------------------ */
#bz-logo { transition: filter 240ms cubic-bezier(0.2,0.8,0.3,1); }
#bz-logo.is-bone { filter: brightness(0) invert(1); }

/* ------------------------------------------------------------
   Hover states.

   The design expressed these as style-hover="…", an attribute its runtime
   implemented and plain HTML ignores — so without this, all 57 of them vanish.
   `!important` is required, not sloppiness: the elements carry an inline
   `color`, and an inline style outranks any selector without it.
   ------------------------------------------------------------ */
[data-hv="ink"]:hover { color: var(--ink) !important; }
[data-hv="dim"]:hover { filter: brightness(0.97); }

/* ------------------------------------------------------------
   Form states. The design has no error affordance — it assumed a
   submit that always succeeded. These cover the real ones.
   ------------------------------------------------------------ */
.bz-formerror {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--status-critical-fg);
  background: var(--status-critical-ground);
  border-radius: var(--radius-input);
  padding: 12px 16px;
}
.bz-formerror a { color: inherit; font-weight: 600; }
button[disabled] { opacity: 0.62; cursor: progress; }

/* Visible keyboard focus. The design specifies a focus halo token but never
   applies it; without this, tabbing through the forms is invisible. */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== page-elder-homes.css ===== */
  @media (max-width: 900px) {
    .bz-split, .bz-two, .bz-priv { grid-template-columns: minmax(0,1fr) !important; }
    .bz-priv > div:first-child { position: static !important; }
    .bz-three { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .bz-herogrid { grid-template-columns: minmax(0,1fr) !important; }
    .bz-compare { font-size: 15px !important; }
  }
  @media (max-width: 680px) {
    .bz-three { grid-template-columns: minmax(0,1fr) !important; }
    .bz-scroller { overflow-x: auto; }
    .bz-pilotform { grid-template-columns: minmax(0,1fr) !important; }
  }

/* ===== page-index.css ===== */
  @keyframes bz-orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .bz-orbit-bubble { animation: none !important; } }
  @media (max-width: 1080px) {
    .bz-vitals { grid-template-columns: repeat(3, 1fr) !important; }
  }
  @media (max-width: 1300px) { .bz-portraits { display: none; } }
  @media (max-width: 900px) {
    .bz-featurerow, .bz-two, .bz-esc, .bz-priv, .bz-faq, .bz-spechead { grid-template-columns: minmax(0,1fr) !important; }
    .bz-featurerow-rev > div:first-child { order: 2; }
    .bz-specgrid { grid-template-columns: minmax(0,1fr) !important; }
    .bz-faq > div:first-child { position: static !important; }
    .bz-portraits { display: none; }
  }
  @media (max-width: 680px) {
    .bz-vitals { grid-template-columns: repeat(2, 1fr) !important; }
  }