/* ══════════════════════════════════════════════════════════════════════════
   HEALTHSAIL (HIPAA eCommerce) — Palette tokens
   Brand system: HealthSail
   Version 1.0
   ──────────────────────────────────────────────────────────────────────────
   Brand identity: HealthSail deep-teal banner depth + bright aqua accent
                   + teal-slate ink. Sourced from the Figma "HealthSail" page
                   (Logos & Banners file).

   The HealthSail banner gradient (Figma "Bgr-HealthSail") is a teal scale:
     • #0083AC  — bright teal (gradient edge / brand prime)
     • #007179  — mid teal
     • #004858  — deep teal (gradient anchor)

   NOTE ON NAMING: the product's brand name is HealthSail, but page COPY
   refers to the solution as "HIPAA eCommerce" for SEO/AEO/GEO reach
   (far more people search "HIPAA eCommerce" than "HealthSail"). Pages live
   under /hipaa-ecommerce/ and link this palette as healthsail.css.

   Load BEFORE core/css/clarity-core.css so :root tokens cascade.

     <link rel="stylesheet" href="../_clarity-design-system/palettes/healthsail.css">
     <link rel="stylesheet" href="../_clarity-design-system/core/css/clarity-core.css">

   This product uses the .phb-b banner variant (full-bleed background). No
   external banner image is hosted yet, so --cds-banner-bg is a CSS teal
   gradient that mirrors the Figma HealthSail banner. Swap to a CDN image
   URL later by editing the two --cds-banner-bg-* tokens at the bottom.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Dark surface family — V14 closer + mid-CTA gradient stops.
     Anchored on the HealthSail deep-teal end. deep-1 = darkest center. */
  --cds-surface-deep-1: #00303B;   /* deep teal — gradient center */
  --cds-surface-deep-2: #00485A;   /* HealthSail-deep #004858 — gradient mid */
  --cds-surface-deep-3: #006B79;   /* mid teal — gradient edge */

  /* Primary accent — CTAs, H1 highlight word, eyebrow pill, stat numbers.
     Bright aqua sits a step above the brand teal so highlights pop on the
     dark-teal banner + closer. */
  --cds-accent:        #00B8D4;    /* bright aqua-teal */
  --cds-accent-2:      #0096AE;    /* hover — darker aqua */

  /* Glows derived from --cds-accent rgb(0, 184, 212) */
  --cds-accent-glow-strong: rgba(0, 184, 212, 0.45);
  --cds-accent-glow-soft:   rgba(0, 184, 212, 0.18);
  --cds-accent-border:      rgba(0, 184, 212, 0.30);
  --cds-accent-focus:       #5AD6E8;   /* focus-visible outline */

  /* Cool accent — H2 accent words, pain-point icons, takeaway icons.
     Uses the HealthSail brand-prime teal (#0083AC) and a deeper teal for
     link/glyph contrast on white. */
  --cds-accent-cool:   #0083AC;    /* HealthSail brand prime — H2 accents, pain icons */
  --cds-accent-cool-2: #00626E;    /* deep teal — body links + takeaway icon glyphs */
  --cds-cool-glow:     rgba(0, 72, 88, 0.42);   /* banner / closer bottom-left radial */

  /* Ink / text — teal-slate scale on white surfaces */
  --cds-ink:         #06212A;      /* near-black teal — headings, emphasis */
  --cds-ink-muted:   #2C4A52;      /* body copy */
  --cds-ink-subtle:  #45646C;      /* captions */
  --cds-ink-faint:   #6E8B92;      /* tertiary */

  /* Cool tints — soft card backgrounds, borders, icon chips */
  --cds-tint-cool:    #D6F0F5;     /* icon backgrounds */
  --cds-tint-cool-2:  #A7DDE6;     /* card borders */
  --cds-tint-cool-3:  #EFFAFC;     /* soft card bg */

  --cds-card-border:  #A7DDE6;     /* alias to tint-cool-2 */

  /* Flowing dot-contour overlay — the same asset Payment Hub uses (copied
     into this product's assets). It's white waves on black, so it rides the
     shared .phb-glow layer screen-blended (black drops out, waves tint teal).
     Path is relative to THIS palette file. */
  --cds-banner-dots: url(../products/healthsail/assets/banner-contour.png);

  /* Banner background — teal gradient mirroring the Figma HealthSail banner:
     a brighter teal wash upper-left, deepening toward the lower-right where
     the contour dots + logo sit. When a CDN banner image is produced, replace
     these with `url('https://cvilnk.com/images/...') center / cover no-repeat`.

       --cds-banner-bg-full     — tall banner for champion / hero pages
       --cds-banner-bg-compact  — short banner for detail / how-to pages */
  --cds-banner-bg-full:
    radial-gradient(760px 620px at 0% 2%, rgba(82, 212, 226, 0.30) 0%, rgba(82, 212, 226, 0) 52%),
    linear-gradient(108deg, #14899a 0%, #0c6675 32%, #084a58 62%, #053742 100%);
  --cds-banner-bg-compact:
    radial-gradient(640px 460px at 0% 0%, rgba(82, 212, 226, 0.26) 0%, rgba(82, 212, 226, 0) 54%),
    linear-gradient(108deg, #12818f 0%, #0a5562 45%, #053742 100%);
  --cds-banner-bg: var(--cds-banner-bg-full);
}

/* ══════════════════════════════════════════════════════════════════════════
   HEALTHSAIL banner treatment — scoped to .phb-b. Only loads on HIPAA
   eCommerce pages (this palette isn't linked elsewhere), and out-specifies
   core's `.phb-b .phb-glow { display:none }` so the dots show.
   ══════════════════════════════════════════════════════════════════════════ */
.phb-banner.phb-b .phb-glow {
  display: block;
  background: var(--cds-banner-dots) no-repeat right center / cover;
  mix-blend-mode: screen;
  opacity: 0.18;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 48%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 48%, #000 100%);
}
/* Champion / section-landing banner (full .phb-b, NOT compact) is a tall hero;
   the compact variant keeps core's shorter internal-page padding. */
.phb-banner.phb-b:not(.phb-compact) .phb-inner {
  padding-top: 100px;
  padding-bottom: 124px;
  min-height: 420px;
}
@media (max-width: 900px) {
  .phb-banner.phb-b:not(.phb-compact) .phb-inner {
    padding-top: 52px; padding-bottom: 60px; min-height: 0;
  }
}

/* fine noise/dither to kill on-screen gradient banding */
.phb-banner.phb-b::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ── Banner eyebrow + brand chrome (HealthSail logo + aqua block) ──
   Shared across every HealthSail banner. Each page sets --hse-brand-top on
   the banner <section> so the logo sits just below that page's H1
   (e.g. ~350px for a 4-line champion H1, ~250px for a 2-line landing H1). */
.hse-eyebrow {
  display: inline-block;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin: 0 0 18px;
}
.phb-banner.phb-b .hse-banner-brand {
  position: absolute; right: 0; top: var(--hse-brand-top, 300px); z-index: 3;
  display: flex; align-items: center; gap: 70px;
}
.hse-logo { display: inline-flex; align-items: center; gap: 11px; }
.hse-logo-mark { width: 34px; height: 34px; display: block; flex: 0 0 34px; }
.hse-logo-word { color: #fff; font-weight: 700; font-size: 20px; letter-spacing: -0.01em; line-height: 1; }
.hse-brand-aqua { width: 210px; height: 16px; border-radius: 0; background: var(--cds-accent); }
@media (max-width: 1080px) { .phb-banner.phb-b .hse-banner-brand { display: none; } }