/* =============================================================================
   HEALS design tokens
   =============================================================================
   THE single place brand is defined. Every widget, every template and every
   WooCommerce override reads from here.

   RULE: no PHP file, no widget and no other stylesheet may contain a brand hex
   value or a font family name. `.build\verify-tokens.php` enforces it. If you
   need a new colour, add a token here and reference it, so a rebrand is one
   file rather than a search-and-replace across the tree.

   Values are harvested from the Claude Design brief:
   https://claude.ai/design/p/a3be9ef1-4b45-4c80-9fd7-b2b57fa538e7
   ========================================================================== */

:root {
  /* ---- brand core ------------------------------------------------------- */
  --heals-indigo:        #5556D3;
  --heals-blue:          #2478E8;
  --heals-cyan:          #45E0F2;
  --heals-ink:           #23225C;

  /* ---- brand ramps ------------------------------------------------------ */
  --heals-indigo-700:    #3F40B5;   /* link hover */
  --heals-indigo-600:    #4344BC;   /* solid button hover */
  --heals-indigo-500:    #4E4EC9;   /* active nav, ghost button text */
  --heals-cyan-300:      #5EE4F2;   /* on-dark accent */
  --heals-cyan-200:      #6FE8F5;   /* cyan button hover */

  /* ---- text ------------------------------------------------------------- */
  --heals-text:          var(--heals-ink);
  --heals-text-lead:     #4B4B6E;   /* lede paragraphs */
  --heals-text-body:     #565676;   /* section body copy */
  --heals-text-muted:    #6B6C8E;   /* card body copy */
  --heals-text-faint:    #8688A6;   /* "coming soon" labels */
  --heals-text-nav:      #3C3C5E;   /* inactive nav item */
  --heals-text-on-dark:  #C9D4F5;
  --heals-text-on-dark-2:#C9CDEE;

  /* ---- surfaces --------------------------------------------------------- */
  --heals-surface:       #FFFFFF;
  --heals-surface-alt:   #F7F8FD;   /* alternating section band */
  --heals-surface-chip:  #F1F2FB;   /* pill / chip background */
  --heals-surface-card:  #FBFDFF;   /* top of the card gradient */
  --heals-surface-dark:  var(--heals-ink);

  /* ---- lines ------------------------------------------------------------ */
  --heals-line:          #E7E9F4;   /* default card and section border */
  --heals-line-soft:     #EDEEF8;   /* section rules */
  --heals-line-chip:     #E0E2F3;
  --heals-line-strong:   #C9CAEE;   /* ghost button border */
  --heals-line-hover:    #B9BBE8;   /* card hover border */
  --heals-line-accent:   #DDDEF5;   /* coming-soon panel border */
  --heals-line-on-dark:  rgba(255,255,255,0.14);
  --heals-fill-on-dark:  rgba(255,255,255,0.06);

  /* ---- crisis / alert (Resources crisis block) -------------------------- */
  --heals-alert:         #D9536F;
  --heals-alert-line:    #F3C8CF;
  --heals-alert-hover:   #E8A5B0;
  --heals-alert-surface: #FFF9FA;

  /* ---- selection -------------------------------------------------------- */
  --heals-selection:     #D9F6FB;

  /* ---- gradients -------------------------------------------------------- */
  --heals-grad-cyan-blue:   linear-gradient(135deg, var(--heals-cyan), var(--heals-blue));
  --heals-grad-indigo-blue: linear-gradient(135deg, var(--heals-indigo), var(--heals-blue));
  --heals-grad-cyan-indigo: linear-gradient(135deg, var(--heals-cyan), var(--heals-indigo));
  --heals-grad-blue-indigo: linear-gradient(135deg, var(--heals-blue), var(--heals-indigo));
  --heals-grad-blue-cyan:   linear-gradient(135deg, var(--heals-blue), var(--heals-cyan));
  --heals-grad-indigo-cyan: linear-gradient(135deg, var(--heals-indigo), var(--heals-cyan));
  --heals-grad-card:        linear-gradient(180deg, var(--heals-surface-card), var(--heals-surface));
  --heals-grad-deep:        linear-gradient(120deg, var(--heals-ink) 0%, #3A3AA8 55%, var(--heals-blue) 100%);
  --heals-grad-soft:        linear-gradient(120deg, #F2F2FC 0%, #EDF8FD 100%);

  /* Ambient page washes. Kept as tokens so a page does not restate the stops. */
  --heals-wash-hero:
    radial-gradient(900px 480px at 88% -10%, #DFF8FC 0%, rgba(223,248,252,0) 60%),
    radial-gradient(700px 420px at -8% 110%, #EEEEFB 0%, rgba(238,238,251,0) 55%),
    var(--heals-surface);
  --heals-wash-page:
    radial-gradient(760px 420px at 90% -20%, #DFF8FC 0%, rgba(223,248,252,0) 60%),
    var(--heals-surface);

  /* ---- typography ------------------------------------------------------- */
  --heals-font-heading: 'Sora', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --heals-font-body:    'Public Sans', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;

  --heals-fs-display:   52px;  /* home h1 */
  --heals-fs-h1:        44px;  /* interior page h1 */
  --heals-fs-h2:        34px;
  --heals-fs-h2-sm:     30px;
  --heals-fs-h3:        18px;
  --heals-fs-h3-sm:     17px;
  --heals-fs-lead:      17px;
  --heals-fs-body:      16px;
  --heals-fs-sm:        15px;
  --heals-fs-xs:        14px;
  --heals-fs-card:      13.5px;
  --heals-fs-kicker:    12px;

  --heals-lh-tight:     1.12;
  --heals-lh-heading:   1.22;
  --heals-lh-body:      1.65;
  --heals-lh-loose:     1.7;

  --heals-tracking-kicker: 0.16em;
  --heals-tracking-tight:  -0.02em;

  /* ---- layout ----------------------------------------------------------- */
  --heals-maxw:         1180px;
  --heals-gutter:       24px;
  --heals-nav-h:        84px;
  --heals-section-y:    84px;

  /* ---- radii ------------------------------------------------------------ */
  --heals-radius-sm:    12px;
  --heals-radius:       16px;
  --heals-radius-lg:    18px;
  --heals-radius-xl:    20px;
  --heals-radius-pill:  999px;

  /* ---- elevation -------------------------------------------------------- */
  --heals-shadow-btn:   0 4px 16px rgba(85, 86, 211, 0.30);
  --heals-shadow-pill:  0 2px 8px rgba(85, 86, 211, 0.28);

  /* Applied as a `filter`, not a `box-shadow`, so it follows the alpha edges of a
     transparent PNG rather than drawing a rectangle behind it. Deliberately faint:
     it should lift the mark off the page, not announce itself. */
  --heals-shadow-logo:  drop-shadow(0 1px 1.5px color-mix(in srgb, var(--heals-ink) 22%, transparent));
}