/* brand.css  —  NEW FILE
   AlwaysOn MED · Always On Medical LLC · TARGET A (marketing site)

   CREATE AT: public/brand.css
   LINK IT AFTER styles.css, in index.html:
     <link rel="stylesheet" href="/styles.css">
     <link rel="stylesheet" href="/brand.css">   <-- new, must be second

   Not a component stylesheet. It is the token layer plus the four global rules
   the site never had: link colours, :focus-visible, status colours, and the
   dark theme.

   WHY THE ORDER MATTERS: this file declares --brand at :root and defaults
   --accent to it. Before this change --accent was only declared inside
   .page[data-avatar], so /investor, /pricing, /security and the 404 route
   rendered white text on a transparent button. Loading this file FIRST would
   let styles.css win and the four routes would stay broken.

   MUST NOT BREAK: one brand colour, everywhere. The site tints page accents
   per audience (staff, director, doctor, family) and that is fine - but the
   LOGO is always --brand. A logo that changes colour is not a logo.
*/

:root {
  /* ---- brand ------------------------------------------------------------
     ONE colour at two lightnesses, not two colours. The paper value measures
     2.7:1 on the slate chrome — under the 3:1 floor for graphical objects —
     so dark surfaces take the lighter sibling at 5.5:1. */
  --brand:            oklch(0.44 0.11 190);
  --brand-on-dark:    oklch(0.62 0.11 190);
  --brand-soft:       oklch(0.94 0.025 190);
  --brand-soft-ink:   oklch(0.28 0.08 190);
  --brand-fg:         oklch(0.99 0.003 75);

  /* ---- the repair -------------------------------------------------------
     --accent was ONLY ever declared inside .page[data-avatar] / .hq[data-avatar].
     Four routes carry no avatar (Investor, Pricing, Security, NotFound), so
     .cta { background: var(--accent) } resolved to nothing and rendered white
     text on a transparent button. Defaulting it here fixes all four. */
  --accent:       var(--brand);
  --accent-soft:  var(--brand-soft);
  --accent-fg:    var(--brand-soft-ink);

  /* --accent-text was hardcoded to the staff amber, so every .headline .accent
     and .section-title .accent rendered warm on every page regardless of
     avatar. It is the brand colour's job now. */
  --accent-text:  var(--brand);

  /* ---- status ----------------------------------------------------------
     These existed in the app but never in the brand layer, so marketing
     components invented their own per instance. Named once. */
  --confirm:      oklch(0.55 0.13 145);
  --confirm-soft: oklch(0.96 0.03 145);
  --confirm-line: oklch(0.85 0.07 145);
  --warning:      oklch(0.60 0.15 50);
  --warning-soft: oklch(0.96 0.04 65);
  /* --critical already exists at styles.css:43 — left alone */

  --focus-ring:   var(--brand);
}

/* ---- dark theme ---------------------------------------------------------
   Deliberately NO prefers-color-scheme query: light is the default for every
   first visit regardless of the visitor's system setting. Dark is opt-in and
   persisted by ThemeToggle. The daytime buyer meets the brand in its light
   form first; dark exists for the 3am med cart. */
[data-theme="dark"] {
  --bg:            oklch(0.18 0.015 260);
  --bg-elev:       oklch(0.205 0.016 260);
  --card:          oklch(0.225 0.018 260);
  --border:        oklch(0.31 0.02 260);
  --border-strong: oklch(0.38 0.022 260);
  --ink:           oklch(0.96 0.005 75);
  --ink-1:         oklch(0.96 0.005 75);
  --ink-2:         oklch(0.76 0.012 260);
  --ink-3:         oklch(0.62 0.014 260);

  --brand:          var(--brand-on-dark);
  --brand-soft:     oklch(0.29 0.045 190);
  --brand-soft-ink: oklch(0.85 0.07 190);
  --brand-fg:       oklch(0.16 0.015 260);

  --accent:      var(--brand-on-dark);
  --accent-soft: oklch(0.29 0.045 190);
  --accent-fg:   oklch(0.85 0.07 190);
  --accent-text: var(--brand-on-dark);

  --confirm:      oklch(0.72 0.14 145);
  --confirm-soft: oklch(0.28 0.05 145);
  --confirm-line: oklch(0.40 0.07 145);

  --chrome-bg:      oklch(0.14 0.012 260);
  --chrome-bg-elev: oklch(0.20 0.016 260);
  --chrome-border:  oklch(0.28 0.02 260);

  color-scheme: dark;
}

/* The persona accents stay for PAGE tinting, but they must not reach the
   logo. Mark always paints --brand, never --accent. On dark they need their
   own lighter values or they fail against the slate ground. */
[data-theme="dark"] .page[data-avatar="A"], [data-theme="dark"] .hq[data-avatar="A"] { --accent: oklch(0.72 0.13 55);  --accent-soft: oklch(0.30 0.05 55);  --accent-fg: oklch(0.88 0.06 60); }
[data-theme="dark"] .page[data-avatar="B"], [data-theme="dark"] .hq[data-avatar="B"] { --accent: oklch(0.62 0.14 255); --accent-soft: oklch(0.28 0.06 255); --accent-fg: oklch(0.86 0.05 255); }
[data-theme="dark"] .page[data-avatar="C"], [data-theme="dark"] .hq[data-avatar="C"] { --accent: oklch(0.64 0.09 185); --accent-soft: oklch(0.29 0.04 185); --accent-fg: oklch(0.86 0.05 185); }
[data-theme="dark"] .page[data-avatar="F"], [data-theme="dark"] .hq[data-avatar="F"] { --accent: oklch(0.66 0.15 12);  --accent-soft: oklch(0.30 0.07 12);  --accent-fg: oklch(0.88 0.06 12); }

/* ---- links -------------------------------------------------------------
   The site had NO global anchor rule. Link colour existed only scoped to
   Privacy/Terms/Contact prose, so every other link — Security, Pricing, the
   404, all footers — rendered browser-default blue on warm paper. */
a { color: var(--brand); text-decoration: none; }
a:hover { color: color-mix(in oklch, var(--brand) 78%, black); text-decoration: underline; }
[data-theme="dark"] a:hover { color: color-mix(in oklch, var(--brand) 80%, white); }
a:visited { color: var(--brand); }

/* Footer and nav links keep their own quieter colour, teal only on hover. */
.site-foot-nav a, .site-foot-group a { color: var(--ink-2); }
.site-foot-nav a:hover, .site-foot-group a:hover { color: var(--brand); }

/* ---- focus -------------------------------------------------------------
   Nothing in the guide, and only three components had a focus style. On a
   keyboard-heavy clinical tool the ring is a brand surface. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.cta:focus-visible, .site-foot-cta:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
[data-theme="dark"] .cta:focus-visible,
[data-theme="dark"] .site-foot-cta:focus-visible {
  outline-color: var(--brand-fg);
}

/* ---- the brandbar compliance line -------------------------------------
   Brandbar took a `compliance` prop that only Investor and Admin passed, so
   43 of 45 rendered screens showed a bare ::before dot with no text beside
   it. Brandbar.jsx now defaults the string; this hides the dot if it is ever
   genuinely empty rather than leaving a floating bullet. */
.brandbar .compliance:empty { display: none; }

/* ---- the mono wordmark ------------------------------------------------
   Shipping on ten screens with no spec. If it stays, it is specified. */
.site-foot-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

/* ---- compliance pill -------------------------------------------------
   The seal dot followed --accent, so it changed colour per persona. It is a
   trust marker, not a persona marker: green for a live claim. */
.seal .sw { background: var(--confirm) !important; }

/* ---- status usages the components were inventing ---------------------- */
.hq-status .check { color: var(--confirm); }
.home-hero-form-success { border-color: var(--confirm-line); background: var(--confirm-soft); }
.milestone.reached { border-color: var(--brand); }