/* ============================================================
   Mermaid Health — brand overlay
   ============================================================

   Re-hues the app to match the sales site (mermaid.health).

   HOW IT WORKS
   The app already defines its whole palette as CSS custom
   properties on :root. This file redefines those same tokens
   with the sales site's colours, plus a few small component
   tweaks below. No markup changes.

   The selector is html:root rather than :root so these values
   win regardless of whether this file loads before or after
   the app's own <style> block.

   TO TURN IT OFF
   Remove the <link rel="stylesheet" href="/brand.css"> line
   from <head> in index.html. Nothing else to undo.
   ============================================================ */

html:root {

  /* ---- Greens become ocean navy -------------------------
     Was sage green (#2E6E52), the Butter-era brand colour.
     Now the sales site's --ocean. Affects the page header,
     the summary card's dark ribbon, headings and links. */
  --sage:        #1C4A6E;   /* was #2E6E52 */
  --sage-dark:   #133652;   /* was #1e4d38 */
  --sage-mid:    #A2D4CE;   /* was #b8d9ca */
  --sage-light:  #E8F3F5;   /* was #EAF3EE */

  /* ---- Gold becomes soft blue ---------------------------
     "--butter" is literally the old Butter Health accent.
     Drives the beta banner and soft highlight panels.

     Coral was tried first and read as too loud against
     clinical content. This soft ocean blue sits in the same
     family as --sage, so the accents agree rather than
     compete. Tune this one value to shift the banner. */
  --butter:       #5A93BD;  /* was #E8A820, then coral #E07A55 */
  --butter-dark:  #47789D;  /* hover / pressed */
  --butter-mid:   #B7D2E5;  /* borders on soft panels */
  --butter-light: #E9F1F7;  /* soft panel backgrounds */

  /* ---- Warm cream becomes cool seafoam ------------------
     The biggest shift in feel. The app used to sit on warm
     cream; the sales site sits on a faint blue-green. This is
     what makes the two look like one product. */
  --warm:       #F4F8F8;    /* was #FAF8F3 */
  --warm-dark:  #E4EEEE;    /* was #f0ece2 */
  --white:      #FAFCFB;    /* was #FFFDF9 */
  --border:     #C8DCDA;    /* was #E5E0D5 */

  /* ---- Text --------------------------------------------- */
  --text:        #1A2D38;   /* was #1E1B16 */
  --text-muted:  #4A6470;   /* was #5C5749 */

  /* ---- Success -----------------------------------------
     Stays green, because green means success and that should
     not change with branding. Retuned to the teal-green the
     sales site uses for completed steps. */
  --success:       #2C8A80; /* was #2E6E52 */
  --success-light: #E8F3F5; /* was #EAF3EE */

  /* ---- Error: deliberately unchanged. Red is red. ------- */
}

/* ============================================================
   HEADER SPACING

   The app header is a full-width sticky bar with a flat 40px
   of padding, so on a wide display the wordmark and the
   "Logged in as ..." text sit very close to the screen edges.

   Padding is now responsive: 20px on a narrow window, growing
   to 160px on a large one. The bar itself stays full width, so
   the white background and bottom border still run edge to
   edge — only the contents move inward.

   Tune 6vw (how fast it grows) or 160px (how far it can go).
   ============================================================ */

body > header {
  padding-left:  clamp(20px, 6vw, 160px) !important;
  padding-right: clamp(20px, 6vw, 160px) !important;
}

/* ============================================================
   COPY SUMMARY BUTTON

   This button sits on the dark navy ribbon at the top of the
   summary card. At mid blue it read as muddy against the navy,
   so it is now pale blue with navy text — it lifts off the
   dark bar and reads as the primary action it is.

   No !important here, and that is deliberate. copyAll() sets
   an inline background for the "Copied!" confirmation and then
   clears it with '' after 2.5 seconds. Because this rule has
   normal weight, the inline style wins during the confirmation
   and this rule takes over again once it is cleared.
   ============================================================ */

.copy-btn-inline {
  background: #CFE2F1;
  color: var(--sage-dark);
}

.copy-btn-inline:hover {
  background: #B9D4E9;
}

/* ============================================================
   The six trust chips (KAN-52) — RESOLVED

   Previously each icon circle carried a hard-coded pastel —
   green, blue, orange, pink, purple, teal — inline in
   index.html, unreachable from here. Now edited directly in
   index.html: all six use the same pale seafoam (#E8F3F5 /
   #2C8A80). The "GDPR compliant" chip was also reworded per
   KAN-76 — see index.html for current copy.
   ============================================================ */