/*
 * Clarity Component Library — design tokens
 *
 * CSS custom properties used by all components. Override on :root in a host
 * page or a CMS theme to retheme the entire library at once.
 *
 * Tokens calibrated against the live Clarity Ventures pillar page:
 *   https://cvi-uat-v2.clarityclient.com/payment-hub
 * captured 2026-04-28. The Payment Hub product palette is the default
 * accent family (emerald/teal); other product lines override the accent
 * tokens at a wrapper element if needed.
 *
 * Live site uses Tailwind utility classes with a `custome-*` theme
 * extension. The token names below mirror the most-used Tailwind classes
 * so component CSS reads naturally.
 */

:root {
  /* ── Slate text (matches Tailwind custome-slate-*) ── */
  --cv-color-text:            #0F172A;  /* slate-900: primary text, headings */
  --cv-color-text-strong:     #0B1E33;  /* card titles, emphasized labels */
  --cv-color-text-muted:      #475569;  /* slate-600: body lede / secondary */
  --cv-color-text-faint:      #64748B;  /* slate-500: meta, captions, breadcrumbs */
  --cv-color-text-on-dark:    #FFFFFF;
  --cv-color-text-on-accent:  #0F172A;  /* dark text reads on emerald-400 button */

  /* ── Surfaces ── */
  --cv-color-bg:              #FFFFFF;
  --cv-color-bg-subtle:       #F1F5F9;  /* slate-100: card backgrounds, alt rows */
  --cv-color-bg-mint:         #F2FEFA;  /* product-page section backgrounds */
  --cv-color-bg-mint-soft:    #D9FBEF;  /* card / accordion-active fills */
  --cv-color-bg-mint-pale:    #EAFFF7;  /* icon haloes */
  --cv-color-bg-mint-pill:    #D8FBEF;  /* "Let our experts help you" panels */
  --cv-color-border:          #E2E8F0;  /* slate-200: subtle dividers */
  --cv-color-border-mint:     #C6DBD4;  /* FAQ accordion left border */
  --cv-color-overlay:         rgba(0, 0, 0, 0.45);
  --cv-color-overlay-hover:   rgba(0, 0, 0, 0.55);

  /* ── Brand accent: Payment Hub emerald (default) ── */
  --cv-color-accent:          #17D994;  /* emerald-400: primary CTA fill */
  --cv-color-accent-hover:    #00B860;  /* emerald-600: CTA hover, link hover */
  --cv-color-accent-light:    #B5FFE6;  /* lighter mint */
  --cv-color-accent-bg:       #EAFFF7;  /* emerald-50: icon halo */
  --cv-color-accent-bg-soft:  #D9FBEF;  /* green-100: inner halo ring */

  /* ── Brand accent variants for other product lines ── */
  /* Override these on a wrapper element for ecommerce / hipaa / etc. pages */
  --cv-color-link:            #0A6CFF;  /* default blue link / "Get A Quote" button */
  --cv-color-link-hover:      #094EB3;
  --cv-color-link-tab:        #0EA5E9;  /* breadcrumb-active sky-500 */

  /* Hero gradient stops — Payment Hub teal-to-deep-green */
  --cv-grad-hero-from:        #3F97AA;
  --cv-grad-hero-via:         #113F59;
  --cv-grad-hero-to:          #004131;

  /* Focus */
  --cv-color-focus-ring:      #0A6CFF;

  /* ── Type ── */
  /* Live site loads Typekit kit fiy6zjt — when used inside the live shell,
     fonts are inherited. When components run standalone, fall back to a
     close system sans-serif. */
  --cv-font-family:           "skolar-sans-latin", system-ui, -apple-system, "Segoe UI",
                              Roboto, "Helvetica Neue", Arial, sans-serif;
  --cv-font-size-xs:          0.8125rem; /* 13px — meta, breadcrumbs */
  --cv-font-size-sm:          0.875rem;  /* 14px */
  --cv-font-size-base:        1rem;      /* 16px body */
  --cv-font-size-lg:          1.125rem;  /* 18px lede */
  --cv-font-size-xl:          1.375rem;  /* 22px H3 */
  --cv-font-size-2xl:         1.5rem;    /* 24px section sub-heading */
  --cv-font-size-3xl:         1.875rem;  /* 30px H2 mobile */
  --cv-font-size-h2:          2.8rem;    /* 44.8px H2 desktop */
  --cv-font-size-h1:          3rem;      /* 48px H1 */

  --cv-font-weight-regular:   400;
  --cv-font-weight-medium:    500;
  --cv-font-weight-semibold:  600;
  --cv-font-weight-bold:      700;

  --cv-line-height-tight:     1.15;      /* H1 / display */
  --cv-line-height-snug:      1.25;      /* H2 */
  --cv-line-height-base:      1.5;       /* body */
  --cv-line-height-loose:     1.7;       /* lede paragraphs (Ron's pages use this) */

  /* ── Spacing (4px base, mirrors Tailwind) ── */
  --cv-space-1:               0.25rem;
  --cv-space-2:               0.5rem;
  --cv-space-3:               0.75rem;
  --cv-space-4:               1rem;
  --cv-space-5:               1.25rem;
  --cv-space-6:               1.5rem;
  --cv-space-8:               2rem;
  --cv-space-10:              2.5rem;
  --cv-space-12:              3rem;

  /* ── Radius (Clarity uses 5–12px on cards, 10px on buttons / pills) ── */
  --cv-radius-xs:             5px;       /* accordion cards on Ron's pages */
  --cv-radius-sm:             8px;
  --cv-radius-md:             10px;      /* cards, buttons, pills (most common) */
  --cv-radius-lg:             12px;
  --cv-radius-pill:           9999px;

  /* ── Elevation ── */
  --cv-shadow-sm:             0 1px 2px rgba(0, 0, 0, 0.05);
  --cv-shadow-md:             0 1px 3px rgba(0, 0, 0, 0.06);
  --cv-shadow-card:           0 5px 15px rgba(0, 0, 0, 0.05);  /* Ron's accordion cards */
  --cv-shadow-lg:             0 8px 24px rgba(0, 0, 0, 0.12);
  --cv-shadow-drop:           0 3px 5px rgba(0, 0, 0, 0.15);   /* sticky header */

  /* ── Layout widths ── */
  --cv-container-narrow:      960px;     /* Ron's body content (cpf-container) */
  --cv-container-default:     1230px;    /* live site default container */
  --cv-container-wide:        1600px;    /* hero gradient section bound */

  /* ── Motion ── */
  --cv-motion-fast:           120ms;
  --cv-motion-base:           200ms;
  --cv-motion-slow:           360ms;
  --cv-motion-easing:         cubic-bezier(0.2, 0.8, 0.2, 1);
  --cv-motion-linear:         linear;
}

/* Per-product accent overrides. Apply by adding a class to a wrapper
   (e.g., <div class="cv-theme-ecommerce">) above any component. */
.cv-theme-ecommerce {
  --cv-color-accent:          #1470FC;  /* eCommerce blue */
  --cv-color-accent-hover:    #094EB3;
  --cv-color-accent-bg:       #DBEAFE;
  --cv-color-text-on-accent:  #FFFFFF;
  --cv-grad-hero-from:        #1470FC;
  --cv-grad-hero-via:         #0050C0;
  --cv-grad-hero-to:          #003388;
}

.cv-theme-hipaa {
  --cv-color-accent:          #4ACED8;  /* HIPAA teal-cyan */
  --cv-color-accent-hover:    #00BCC0;
  --cv-color-accent-bg:       #CFFAFE;
  --cv-color-text-on-accent:  #0F172A;
}

.cv-theme-auction {
  --cv-color-accent:          #F97316;  /* Auction orange */
  --cv-color-accent-hover:    #C2410C;
  --cv-color-accent-bg:       #FFEDD5;
  --cv-color-text-on-accent:  #FFFFFF;
}

.cv-theme-connect {
  --cv-color-accent:          #6366F1;  /* Connect indigo */
  --cv-color-accent-hover:    #4338CA;
  --cv-color-accent-bg:       #E0E7FF;
  --cv-color-text-on-accent:  #FFFFFF;
}

.cv-theme-openrails {
  --cv-color-accent:          #8151DF;  /* OpenRails violet */
  --cv-color-accent-hover:    #6D28D9;
  --cv-color-accent-bg:       #EDE9FE;
  --cv-color-text-on-accent:  #FFFFFF;
}