/* ══════════════════════════════════════════════════════════════════════════
   INTEGRATED eCOMMERCE — Palette tokens
   Brand system: CommerceWeave
   Version 1.0
   ──────────────────────────────────────────────────────────────────────────
   Brand identity: CommerceWeave electric-blue depth + Sky cyan accent
                   + Brands-Text slate ink.

   Three brand scales drive the tokens below:
     • CommerceWeave  — Primary, deep electric blue, 600 Prime = #001BC2
     • Sky            — Secondary, bright cyan blue, 500 Prime = #00A6F4
     • Brands-Text    — Tertiary, slate scale,       700 Prime = #1E4159

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

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

   For pages using the CommerceWeave full-bleed banner image, apply the
   .phb-b banner variant on the <section>:

     <section class="phb-banner phb-b"> ... </section>             ← full / champion
     <section class="phb-banner phb-b phb-compact"> ... </section> ← compact / detail

   Both banner images are CDN-hosted at absolute URLs (see token defs at
   the bottom of this file), so they survive any folder-structure changes
   when pages are published into the production site.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Dark surface family — V14 closer + mid-CTA gradient stops.
     Anchored on the CommerceWeave deep end (950 → 900 → 600 Prime). */
  --cds-surface-deep-1: #00002A;   /* CommerceWeave-950 — gradient center */
  --cds-surface-deep-2: #000067;   /* CommerceWeave-900 — gradient mid */
  --cds-surface-deep-3: #001BC2;   /* CommerceWeave-600 Prime — edge */

  /* Primary accent — CTAs, H1 highlight word, eyebrow pill, stat numbers.
     Sky-500 Prime is the brand's bright interactive blue. */
  --cds-accent:        #00A6F4;    /* Sky-500 Prime */
  --cds-accent-2:      #0084D1;    /* Sky-600 — hover darker */

  /* Glows derived from --cds-accent rgb(0, 166, 244) */
  --cds-accent-glow-strong: rgba(0, 166, 244, 0.45);
  --cds-accent-glow-soft:   rgba(0, 166, 244, 0.18);
  --cds-accent-border:      rgba(0, 166, 244, 0.30);
  --cds-accent-focus:       #74D4FF;   /* Sky-300 — focus-visible outline */

  /* Cool accent — pain-point icons, takeaway icons, secondary accents */
  --cds-accent-cool:   #0069A8;    /* Sky-700 */
  --cds-accent-cool-2: #00598A;    /* Sky-800 */
  --cds-cool-glow:     rgba(0, 105, 168, 0.32);   /* banner bottom-left radial */

  /* Ink / text — Brands-Text slate scale */
  --cds-ink:         #080D17;      /* Brands-Text-950 — body ink darkest */
  --cds-ink-muted:   #1E4159;      /* Brands-Text-700 Prime — body copy */
  --cds-ink-subtle:  #30516E;      /* Brands-Text-500 — captions */
  --cds-ink-faint:   #496988;      /* Brands-Text-400 — tertiary */

  /* Cool tints — soft card backgrounds, borders */
  --cds-tint-cool:    #DFF2FE;     /* Sky-100 — icon backgrounds */
  --cds-tint-cool-2:  #B8E6FE;     /* Sky-200 — card borders */
  --cds-tint-cool-3:  #F0F9FF;     /* Sky-50 — soft card bg */

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

  /* Banner background images — absolute URLs (CDN-hosted), so paths
     stay valid no matter where pages are deployed in the production
     site hierarchy. Two sizes:

       --cds-banner-bg-full     — tall banner for champion / hero pages
       --cds-banner-bg-compact  — short banner for detail / how-to pages

     Default (--cds-banner-bg) points at the full size. Detail pages opt
     into the compact size by adding the .phb-compact modifier alongside
     .phb-b, which rebinds the variable. */
  --cds-banner-bg-full:
    url('https://cvilnk.com/images/banner-bg.jpg') center / cover no-repeat;
  --cds-banner-bg-compact:
    url('https://cvilnk.com/images/banner-sm.jpg') center / cover no-repeat;
  --cds-banner-bg: var(--cds-banner-bg-full);
}