/* ══════════════════════════════════════════════════════════════════════════
   PAYMENT HUB — Palette tokens + banner redesign
   Version 2.0  ·  Figma "Logos & Banners" redesign
   ──────────────────────────────────────────────────────────────────────────
   Load BEFORE core/css/clarity-core.css. Sets :root --cds-* tokens (consumed
   by core) and the Payment-Hub-specific banner treatment (navy→emerald
   gradient + dot-matrix + dither + dark primary button) scoped to .phb-a.

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

   Primitives are the designer's Figma scales (Tailwind-v4 Green/Teal/Slate;
   Navy-Blue is the custom Clarity brand scale). See products/payment-hub/copy.md.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Dark surface family — banner + CTA gradient stops (navy core, teal edge) */
  --cds-surface-deep-1: #0f172b;   /* Slate/900 */
  --cds-surface-deep-2: #1d293d;   /* Slate/800 */
  --cds-surface-deep-3: #0b4f4a;   /* Teal/900  */

  /* Primary accent — CTA accents, H1 accent, eyebrow pill, stat numbers */
  --cds-accent:        #00c951;    /* emerald — Green/500 */
  --cds-accent-2:      #00a63e;    /* darker hover — Green/600 */
  --cds-accent-glow-strong: rgba(0, 201, 81, 0.45);
  --cds-accent-glow-soft:   rgba(0, 201, 81, 0.18);
  --cds-accent-border:      rgba(0, 201, 81, 0.30);
  --cds-accent-focus:       #7bf1a8;  /* Green/300 */

  /* Cool accent — pain-point + takeaway icons, secondary accents */
  --cds-accent-cool:   #009689;    /* Teal/600 */
  --cds-accent-cool-2: #00bba7;    /* Teal/500 */
  --cds-cool-glow:     rgba(0, 150, 137, 0.32);

  /* Ink / text — Figma Slate scale */
  --cds-ink:         #0f172b;
  --cds-ink-muted:   #45556c;
  --cds-ink-subtle:  #62748e;
  --cds-ink-faint:   #90a1b9;

  /* Cool tints — soft card backgrounds */
  --cds-tint-cool:    #f0fdfa;     /* Teal/50  */
  --cds-tint-cool-2:  #96f7e4;     /* Teal/200 */
  --cds-tint-cool-3:  #f0fdf4;     /* Green/50 */
  --cds-card-border:  #96f7e4;     /* Teal/200 */

  /* Banner dot-matrix asset (path is relative to THIS palette file) */
  --cds-banner-dots:  url(../products/payment-hub/assets/banner-contour.png);
}

/* ── Banner redesign — scoped to .phb-a so other products are unaffected ──
   Higher specificity (.phb-banner.phb-a) intentionally out-specifies core's
   .phb-a so this wins regardless of load order. */
.phb-banner.phb-a {
  background:
    radial-gradient(120% 95% at 0% 100%, rgba(0,196,170,0.5) 0%, rgba(0,196,170,0) 55%),
    linear-gradient(to bottom,
      #1a3450 0%, #184058 12%, #135c6c 26%, #0f7567 40%, #128c5d 52%,
      #169f57 64%, #1cb453 74%, #22c050 82%, #28c856 100%);
}
/* the existing .phb-glow layer carries the dot-matrix (screen-blended, feathered left) */
.phb-banner.phb-a .phb-glow {
  background: var(--cds-banner-dots) no-repeat 100% 80% / 82% auto;
  mix-blend-mode: screen;
  opacity: .33;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 45%, #000 100%);
}
/* fine noise/dither to kill on-screen gradient banding */
.phb-banner.phb-a::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .06; 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;
}
/* dark primary button (new design) instead of the green pill */
.phb-banner.phb-a .phb-btn-primary {
  background: #13243a; color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.5);
}
.phb-banner.phb-a .phb-btn-primary:hover { background: #1d3350; }
.phb-banner.phb-a .phb-h1 { font-weight: 700; }