/* ============================================================
   SEAMLESS NAV TOKENS 2026-07-14
   Author: Simon Painter

   Portal-side copy of the shared design token sheet that lives at
   easwrk.com/assets/easwrk-tokens.css. WHMCS cannot fetch that
   file directly: it is a different DirectAdmin account on a
   different origin. This block re-declares the SAME custom
   property names with the SAME values so my.easwrk.com carries
   the same source of truth as the marketing site.

   Do not rename these variables and do not change a value here
   without changing it in easwrk-tokens.css too. The existing
   Lagom2 overrides below are untouched. New portal rules should
   reference --eas-* tokens instead of hardcoding hex values.
   ============================================================ */
:root {
  /* Brand: primary blue and its scale */
  --eas-brand: #5BA3DC;
  --eas-brand-dark: #4A93CC;
  --eas-brand-light: #7ABDE8;

  /* Navy: dark neutral base and two lighter steps */
  --eas-navy-900: #01080f;
  --eas-navy-800: #03101c;
  --eas-navy-700: #071828;

  /* Neutrals: grayscale used for text, borders, surfaces */
  --eas-white: #FFFFFF;
  --eas-gray-100: #F6F4FC;
  --eas-gray-300: #D8D5E8;
  --eas-gray-600: #6B6785;
  --eas-gray-900: #211D3E;

  /* Accent: one supporting color for links, highlights, icons */
  --eas-accent: #0B6FA6;

  /* Font: single family shared by both surfaces */
  --eas-font: 'Nunito Sans', sans-serif;

  /* Type scale: h1 down to small print */
  --eas-text-h1: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  --eas-text-h2: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  --eas-text-h3: 1.5rem;
  --eas-text-h4: 1.25rem;
  --eas-text-body: 1rem;
  --eas-text-small: 0.875rem;

  /* Spacing scale: 4px base unit */
  --eas-space-1: 4px;
  --eas-space-2: 8px;
  --eas-space-3: 12px;
  --eas-space-4: 16px;
  --eas-space-5: 24px;
  --eas-space-6: 32px;
  --eas-space-7: 48px;
  --eas-space-8: 64px;

  /* Border radii */
  --eas-radius-sm: 8px;
  --eas-radius-md: 16px;
  --eas-radius-lg: 28px;
  --eas-radius-pill: 999px;

  /* Shadows */
  --eas-shadow-sm: 0 2px 8px rgba(1, 8, 15, 0.10);
  --eas-shadow-md: 0 14px 34px -16px rgba(1, 8, 15, 0.28);
  --eas-shadow-lg: 0 30px 70px -24px rgba(1, 8, 15, 0.38);
}
/* ============================================================
   END SEAMLESS NAV TOKENS 2026-07-14
   ============================================================ */

/* EasWrk brand override — WHMCS Lagom2 (futuristic style forced LIGHT)
   Matches easwrk.com "Bold 2026": lavender-white base, pastel nebula washes,
   deep sky / violet / magenta accents, frosted white glass cards, dark indigo text. */

/* ── 1. CSS VARIABLES ───────────────────────────────────────── */
:root {
    /* Force light rendering — no explicit declaration existed anywhere
       on my.easwrk.com, so Android Chrome / other UAs with an
       auto-dark-theme feature could algorithmically invert this
       rgba/backdrop-filter-heavy theme (same gap fixed on
       easwrk.com/wrkmate-os, 2026-08-19). */
    color-scheme: only light;

    --body-bg:                      #F6F4FC;
    --sticky-menu-bg:               rgba(255, 255, 255, 0.78);
    --ui-block-bg:                  linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(240,237,250,0.62) 100%);
    --gray-gradient-start:          rgba(106, 72, 201, 0.04);
    --gray-gradient-end:            rgba(106, 72, 201, 0.12);
    --brand-primary:                #5BA3DC;
    --brand-primary-lighter:        #7ABDE8;
    --brand-primary-lighter-2:      #9CCDED;
    --brand-primary-darker:         #4A93CC;
    --brand-primary-gradient-h:     linear-gradient(115deg, #2E7FC2 0%, #4A93CC 45%, #6A48C9 95%);
    --brand-primary-gradient-v:     linear-gradient(160deg, #2E7FC2 0%, #4A93CC 45%, #6A48C9 95%);

    /* Bold tokens */
    --eas-text:    #2D2A4E;
    --eas-heading: #211D3E;
    --eas-dim:     rgba(45, 42, 78, 0.72);
    --eas-line:    rgba(106, 72, 201, 0.16);
    --eas-cyan:    #0B6FA6;
    --eas-violet:  #6A48C9;
}

/* ── 2. BODY BACKGROUND — light + static pastel nebula wash ──── */
body.lagom,
body {
    background-color: #F6F4FC !important;
    background-image:
        radial-gradient(900px 600px at 75% -10%, rgba(199,180,247,0.40) 0%, transparent 60%),
        radial-gradient(800px 540px at 12% 18%, rgba(168,212,246,0.42) 0%, transparent 60%),
        radial-gradient(700px 520px at 85% 75%, rgba(248,196,228,0.32) 0%, transparent 60%) !important;
    background-attachment: fixed !important;
    color: #2D2A4E !important;
}

/* Headings — Sora display face, dark indigo */
.lagom h1, .lagom h2, .lagom h3, .lagom h4,
.lagom .panel-title, .lagom .page-header h1 {
    font-family: "Sora", sans-serif !important;
    color: #211D3E !important;
}

/* ── 3. TOP NAVBAR — light glass ────────────────────────────── */
.lagom .navbar,
.lagom .sticky-header,
.lagom nav.navbar {
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-bottom: 1px solid rgba(106, 72, 201, 0.16) !important;
    box-shadow: 0 1px 0 rgba(106, 72, 201, 0.05) !important;
}
.lagom .navbar a,
.lagom .navbar .nav-link,
.lagom .sticky-header a {
    color: #2D2A4E !important;
}
.lagom .navbar a:hover,
.lagom .sticky-header a:hover {
    color: #211D3E !important;
}

/* ── 4. CARDS / PANELS — frosted white glass ────────────────── */
.lagom .panel,
.lagom .card,
.lagom .panel-default,
.lagom .homepage-tile {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(106, 72, 201, 0.16) !important;
    box-shadow: 0 18px 50px -24px rgba(106, 72, 201, 0.18) !important;
    color: #2D2A4E !important;
}

.lagom .panel:hover,
.lagom .card:hover,
.lagom .homepage-tile:hover {
    border-color: rgba(11, 111, 166, 0.40) !important;
    box-shadow: 0 22px 58px -22px rgba(46, 127, 194, 0.26) !important;
}

/* panel-body sits inside .panel — must be transparent to avoid box-in-box */
.lagom .panel-body {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 15px !important;
    color: #2D2A4E !important;
}

.lagom .panel-footer {
    background: transparent !important;
    border-top: 1px solid rgba(106, 72, 201, 0.12) !important;
    padding: 10px 15px !important;
}

.lagom .panel-heading,
.lagom .card-header {
    color: #211D3E !important;
}

/* ── 5. PAGE WRAPPERS ───────────────────────────────────────── */
.lagom .wrapper,
.lagom .content-wrapper,
.lagom .page-content {
    background: transparent !important;
}

/* ── 6. SIDEBAR — light frosted ─────────────────────────────── */
.lagom .sidebar,
.lagom .side-menu {
    background: rgba(255, 255, 255, 0.60) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-right: 1px solid rgba(106, 72, 201, 0.14) !important;
}

.lagom .sidebar a,
.lagom .side-menu a,
.lagom .list-group-item {
    color: #2D2A4E !important;
}

/* Sidebar nav items — restore padding so icon + text aren't clipped */
.lagom .list-group-item {
    padding-left: 16px !important;
    padding-right: 12px !important;
    background: transparent !important;
}

.lagom .list-group-item:hover {
    background: rgba(11, 111, 166, 0.06) !important;
    color: #211D3E !important;
}

/* Active nav item — left accent, no nested box */
.lagom .list-group-item.active {
    background: rgba(106, 72, 201, 0.10) !important;
    border-color: transparent !important;
    border-left: 2px solid #6A48C9 !important;
    box-shadow: none !important;
    color: #211D3E !important;
}

/* Sidebar panel heading titles */
.lagom .panel-sidebar .panel-heading,
.lagom .panel-sidebar .panel-title {
    padding: 4px 0 4px 7px !important;
    color: #211D3E !important;
}

/* ── 7. DROPDOWN MENUS — white glass ────────────────────────── */
.lagom .dropdown-menu {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(106, 72, 201, 0.16) !important;
    box-shadow: 0 18px 50px -20px rgba(106, 72, 201, 0.28) !important;
}
.lagom .dropdown-menu > li > a,
.lagom .dropdown-menu a {
    color: #2D2A4E !important;
}
.lagom .dropdown-menu > li > a:hover,
.lagom .dropdown-menu a:hover {
    background: rgba(11, 111, 166, 0.08) !important;
    color: #211D3E !important;
}

/* ── 8. TABLES ──────────────────────────────────────────────── */
.lagom .table,
.lagom table {
    background: transparent !important;
    color: #2D2A4E !important;
}

.lagom .table > thead > tr > th {
    color: #211D3E !important;
    border-color: rgba(106, 72, 201, 0.16) !important;
}

.lagom .table > tbody > tr > td {
    color: #2D2A4E !important;
    border-color: rgba(106, 72, 201, 0.12) !important;
}

.lagom .table > tbody > tr:hover > td {
    background: rgba(11, 111, 166, 0.05) !important;
}

/* ── 9. INPUT FIELDS — light, dark text ─────────────────────── */
.lagom .form-control,
.lagom input[type="text"],
.lagom input[type="email"],
.lagom input[type="password"],
.lagom input[type="number"],
.lagom input[type="tel"],
.lagom input[type="search"],
.lagom select,
.lagom textarea {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(106, 72, 201, 0.20) !important;
    color: #2D2A4E !important;
}

.lagom .form-control::placeholder,
.lagom input::placeholder,
.lagom textarea::placeholder {
    color: rgba(45, 42, 78, 0.55) !important;
    opacity: 1 !important;
}

.lagom .form-control:focus,
.lagom input:focus,
.lagom select:focus,
.lagom textarea:focus {
    border-color: rgba(11, 111, 166, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(11, 111, 166, 0.12) !important;
    background: #ffffff !important;
    color: #2D2A4E !important;
}

/* ── 10. BUTTONS ────────────────────────────────────────────── */
/* Primary — bold sky→violet gradient, white text */
.lagom .btn-primary {
    background: linear-gradient(115deg, #2E7FC2 0%, #4A93CC 45%, #6A48C9 95%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 10px 30px -10px rgba(74,147,204,0.55), 0 2px 10px rgba(106,72,201,0.22) !important;
}
.lagom .btn-primary:hover,
.lagom .btn-primary:focus {
    color: #ffffff !important;
    box-shadow: 0 16px 42px -10px rgba(74,147,204,0.70), 0 4px 18px rgba(184,50,128,0.22) !important;
}

/* Default / outline — white glass with violet border, dark text */
.lagom .btn-default,
.lagom .btn-outline {
    background: rgba(255, 255, 255, 0.65) !important;
    border: 1px solid rgba(106, 72, 201, 0.28) !important;
    color: #211D3E !important;
}

.lagom .btn-default:hover,
.lagom .btn-outline:hover {
    background: rgba(11, 111, 166, 0.07) !important;
    border-color: rgba(11, 111, 166, 0.55) !important;
    color: #0B6FA6 !important;
}

/* ── 11. ALERTS ─────────────────────────────────────────────── */
.lagom .alert-info {
    background: rgba(11, 111, 166, 0.08) !important;
    border-color: rgba(11, 111, 166, 0.28) !important;
    color: #211D3E !important;
}

/* ── 12. LOGIN PAGE — light dreamy gradient ─────────────────── */
.lagom.page-login .login-sidebar,
.lagom.page-login .side-illustration {
    background:
        radial-gradient(700px 520px at 25% 20%, rgba(168,212,246,0.55) 0%, transparent 62%),
        radial-gradient(620px 480px at 80% 80%, rgba(199,180,247,0.55) 0%, transparent 62%),
        linear-gradient(135deg, #FFFFFF 0%, #F0EDFA 100%) !important;
}

/* ── 13. PRODUCT CONFIG PAGE — hide oversized product illustration ── */
.lagom [data-summary-main-graphic] {
    display: none !important;
}

/* ── 14. DOMAIN REGISTER PAGE ───────────────────────────────── */

/* Strip the white outer search container */
.lagom .panel-domain-search,
.lagom .panel-body.panel-domain-search {
    background: transparent !important;
    border: 1px solid rgba(106, 72, 201, 0.18) !important;
    box-shadow: none !important;
}

/* Inner search wrappers */
.lagom .domain-search-advanced,
.lagom .domain-search-input {
    background: transparent !important;
}

/* Search field inputs on domain page */
.lagom .panel-domain-search .form-control,
.lagom .panel-domain-search input[type="text"],
.lagom #inputDomain,
.lagom #message {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(106, 72, 201, 0.20) !important;
    color: #2D2A4E !important;
}

/* TLD pricing section heading */
.lagom .tld-header .section-title {
    color: rgba(45, 42, 78, 0.72) !important;
}

/* ── 15. DOMAIN SEARCH — keep availability result visible ───── */
#DomainSearchResults:not(.hidden) #searchDomainInfo {
    display: block !important;
}

/* ── 16. DOMAIN REGISTER PANEL — text colour ──────────────── */
/* Panel title: REGISTER A DOMAIN */
.lagom .panel-domain-register .panel-heading .panel-title {
    color: #211D3E !important;
}

/* Paragraph text: Have a domain? etc. */
.lagom .panel-domain-register p {
    color: rgba(45, 42, 78, 0.72) !important;
}

/* TLD extension pills (btn-default inside the panel) */
.lagom .panel-domain-register .btn-default {
    color: #211D3E !important;
    border-color: rgba(106, 72, 201, 0.28) !important;
}

.lagom .panel-domain-register .btn-default:hover {
    color: #0B6FA6 !important;
    border-color: rgba(11, 111, 166, 0.55) !important;
}

/* ── 17. READABILITY SAFETY NET — flip stray near-white text ── */
.lagom .text-muted,
.lagom small,
.lagom .help-block {
    color: rgba(45, 42, 78, 0.66) !important;
}
.lagom .panel a:not(.btn),
.lagom .card a:not(.btn) {
    color: #0B6FA6 !important;
}

/* ============================================================
   LIGHT-THEME CONTRAST FIXES (2026-06-12)
   - Dark-on-light logo (white inverse wordmark -> navy)
   - Raise faint secondary/muted text on login + client area to AA
   ============================================================ */

/* ── LOGO: white inverse wordmark -> dark navy on light surfaces ── */
.lagom .logo img,
.lagom .sidebar-logo img,
.lagom .logo-container img,
.lagom .navbar-brand img,
img[src*="logo_big_inverse"] {
    filter: brightness(0) saturate(100%) invert(8%) sepia(18%)
            saturate(2200%) hue-rotate(212deg) brightness(0.95) contrast(1.05) !important;
}

/* ── LOGIN PAGE: faint secondary text -> readable dark indigo ── */
/* "Welcome Back" eyebrow */
.lagom .text-lighter-color,
.lagom.page-login .text-lighter-color,
.lagom .login-title + .text-lighter-color {
    color: #2D2A4E !important;
}
/* Field labels: Email Address, Password */
.lagom.page-login label,
.lagom.page-login .control-label,
.lagom .login-form label {
    color: #2D2A4E !important;
}
/* Remember Me text */
.lagom.page-login .icheck-control + *,
.lagom.page-login .checkbox label,
.lagom.page-login form label {
    color: #2D2A4E !important;
}
/* "or" divider */
.lagom .login-divider,
.lagom .login-divider span,
.lagom.page-login .login-divider {
    color: rgba(45, 42, 78, 0.7) !important;
}
.lagom .login-divider::before,
.lagom .login-divider::after {
    border-color: rgba(106, 72, 201, 0.22) !important;
}
/* Secondary links: Forgot? / Create a New Account */
.lagom.page-login a,
.lagom .login-form a,
.lagom.page-login .login-links a {
    color: #0B6FA6 !important;
}
.lagom.page-login a:hover,
.lagom .login-form a:hover {
    color: #211D3E !important;
}

/* ── MUTED TEXT: raise below-AA values to >= 0.7 alpha ── */
.lagom .form-control::placeholder,
.lagom input::placeholder,
.lagom textarea::placeholder {
    color: rgba(45, 42, 78, 0.7) !important;
}
.lagom .text-muted,
.lagom small,
.lagom .help-block,
.lagom .text-lighter-color,
.lagom .text-faded-color {
    color: rgba(45, 42, 78, 0.7) !important;
}


/* ============================================================
   GLOBAL TEXT DARKENING (2026-06-12)
   The futuristic style derives ALL text from the gray scale,
   which ships near-white for its original dark background.
   Layout is forced light, so remap gray scale + text vars
   to a dark-grey ramp.
   ============================================================ */
:root,
:root .lagom,
body.lagom {
    /* Gray scale — dark grey ramp (was near-white hsla(220,100%,90%)) */
    --gray-base:        #3E444D;
    --gray-lighter:     rgba(62, 68, 77, 0.78);
    --gray-lighter-2:   rgba(62, 68, 77, 0.60);
    --gray-lighter-3:   rgba(62, 68, 77, 0.34);
    --gray-lighter-4:   rgba(62, 68, 77, 0.22);
    --gray-faded:       rgba(62, 68, 77, 0.12);
    --gray-darker:      #2F343C;
    --gray-icons:       rgba(62, 68, 77, 0.66);
    --gray-icons-hover: rgba(62, 68, 77, 0.85);

    /* Text vars consumed by every Lagom2 component */
    --text-heading-color: #2F343C;
    --text-body-color:    #3E444D;
    --text-lighter-color: rgba(62, 68, 77, 0.74);
    --text-faded-color:   rgba(62, 68, 77, 0.58);
    --text-primary-color: #0B6FA6;

    /* Inputs (futuristic sets --input-color to white-alpha) */
    --input-color: #3E444D;
}


/* ============================================================
   DARK-SURFACE EXCEPTIONS (2026-06-12)
   Components that keep a dark/gradient background must NOT
   inherit the global dark-grey text remap above. Restore
   light text on these surfaces only.
   ============================================================ */

/* Product Details package box — blue/violet gradient tile
   (.product-icon / #cPanelPackagePanel: cube icon + product
   name + status). Headings white, body light, footer dimmed. */
.lagom .product-icon .product-name,
.lagom .product-icon h2,
.lagom .product-icon .h4 {
    color: #FFFFFF !important;
}
.lagom .product-icon .product-group-name {
    color: rgba(255, 255, 255, 0.85) !important;
}
.lagom .product-icon .product-status,
.lagom .product-icon .product-content {
    color: rgba(255, 255, 255, 0.85) !important;
}
.lagom .product-icon .product-footer {
    color: rgba(255, 255, 255, 0.65) !important;
}


/* ============================================================
   STORE + DOMAIN PAGE FIXES (2026-06-12)
   Scoped contrast fixes for two public store pages after the
   global text darkening remap.
   ============================================================ */

/* ── /store/* pricing section (CMS-embedded #eas-pricing-section) ──
   The Monthly/Annual toggle sits on the LIGHT page background but
   ships white-alpha labels from its embedded dark-theme CSS. */
#eas-pricing-section .eas-toggle-label {
    color: rgba(62, 68, 77, 0.62) !important;
}
#eas-pricing-section .eas-toggle-label.active {
    color: #2F343C !important;
}

/* Pricing card dark-surface overrides removed: the pricing hook now
   ships light-theme card styles natively, so no re-skin is needed here. */

/* ── /cart.php?a=add&domain=register featured TLD cards ──
   The TLD logos (assets/img/tld_logos/*.png) are the standard
   COLORED registry brand marks. theme.css whitens them with
   filter:brightness(0) invert(1) under .lagom-dark-mode (a class
   the Lagom JS toggles client-side via cookie), which renders them
   white on our forced-light cards. Kill the invert so the original
   colored logos show on the light card faces. */
.lagom-dark-mode .featured-tlds .featured-tld img,
.featured-tlds .featured-tld img {
    filter: none !important;
}

/* ============================================================
   TOOLTIP / POPOVER CONTRAST FIX (2026-08-19)
   Customer report: popup info boxes show white text on a very
   light grey background (unreadable).

   Root cause: theme.css's futuristic-scoped rule
   `.lagom-futuristic .tooltip .tooltip-inner{background:var(--dropdown-bg);
   color:#fff;...}` hardcodes color:#fff. --dropdown-bg is itself
   `var(--ui-block-overlay-bg)` in futuristic's own vars, and section 1
   above (plus the easwrk_brand.php head-injected :root block) already
   forces --ui-block-overlay-bg to a light frosted-white gradient for
   this brand — so the background already renders light, but the
   hardcoded white text never got remapped, giving white-on-near-white.
   Same exposure on .page-configureproductdomain .popover, which pins
   its background straight to --dropdown-bg.

   Fix: override the token chain (belt) AND the hardcoded color
   (suspenders — a CSS variable override can't touch a literal #fff).
   Background/border reuse the existing light-glass palette from
   section 7 (dropdown menus); text reuses --eas-text / --eas-heading.
   ============================================================ */
:root {
    --dropdown-bg:           rgba(255, 255, 255, 0.96);
    --tooltip-bg:            rgba(255, 255, 255, 0.96);
    --tooltip-color:         #2D2A4E;
    --popover-bg:            #FFFFFF;
    --popover-border-color:  rgba(106, 72, 201, 0.16);
    --popover-header-bg:     #F6F4FC;
    --popover-header-color:  #211D3E;
    --popover-body-color:    #2D2A4E;
}
.lagom .tooltip .tooltip-inner,
.lagom-futuristic .tooltip .tooltip-inner {
    background: rgba(255, 255, 255, 0.96) !important;
    color: #2D2A4E !important;
}
.lagom .popover,
.lagom-futuristic .popover {
    background: #FFFFFF !important;
    border-color: rgba(106, 72, 201, 0.16) !important;
}
.lagom .popover-header,
.lagom-futuristic .popover-header {
    background-color: #F6F4FC !important;
    color: #211D3E !important;
}
.lagom .popover-body,
.lagom-futuristic .popover-body {
    color: #2D2A4E !important;
}


/* ============================================================
   STATUS/LABEL CHIP CONTRAST FIX (2026-08-19, sweep pt.1)
   Found while sweeping the rest of the client area for the same
   class of bug as the tooltip/popover fix above.

   Root cause: --label-info-bg/-color and --label-primary-faded-bg/
   -color are consumed via theme.css `.label-info{background-color:
   var(--label-info-bg);color:var(--label-info-color)}` and similar
   (pure var() consumers, no hardcoded literals this time). The
   easwrk brand hook (includes/hooks/easwrk_brand.php) redefines
   --brand-info and --brand-info-lighter-2 to two close-together
   light blues (#5BA3DC on #9CCDED) for the light "Bold 2026" look.
   That pairing measures ~1.6:1 contrast (WCAG AA needs 4.5:1) --
   essentially unreadable. --label-primary-faded pairs --brand-primary
   (also redefined lighter than the theme default) with its own
   -lighter-3 background for a similar ~2:1 ratio.

   Confirmed live consumers of these tokens:
   - .label-info: invoice status badges (Draft/Refunded/Cancelled/
     Collections) on viewinvoice.tpl, and badges on domain-renewals,
     homepage.tpl, managessl.tpl, account-user-management.tpl,
     user-switch-account.tpl.
   - .requestor-type-operator (viewticket.tpl support-reply badge)
     reads --status-type-operator / --status-type-operator-text-color,
     which alias straight to --label-info-bg / --label-info-color --
     same bug, different selector, so this must be fixed at the
     token level (not just `.label-info`) to cover it.
   - .label-primary-faded: WP product-name badge (store/addon/
     wp-pricing.tpl) and the "+N" extra-TLD popover trigger chip
     (core/pages/configureproductdomain/boxed/configureproductdomain.tpl).

   Fix: override the token chain only (belt) -- theme.css's rules for
   these classes are plain var() consumers with no hardcoded #fff to
   fight, unlike the tooltip fix, so no class-level !important
   override is needed. Reuses the existing --eas-cyan (#0B6FA6) /
   alert-info light-wash pairing already established in section 11
   (ALERTS) for visual consistency. Measured ~4.7:1 on white/panel
   backgrounds -- passes AA.
   ============================================================ */
:root {
    --label-info-bg:               rgba(11, 111, 166, 0.10);
    --label-info-color:            #0B6FA6;
    --label-primary-faded-bg:      rgba(11, 111, 166, 0.10);
    --label-primary-faded-color:   #0B6FA6;
}