:root{
    /* General Font Variables */

    /* Font-Weight */
    --cc-font-weight-regular: 500;
    --cc-font-weight-bold: 700;
    --cc-line-height-sm: 1.2;
    --cc-line-height-md: 1.25;
    --cc-line-height-lg: 1.3;
    --cc-line-height-xl: 1.4;
    --cc-line-height-xxl: 1.5;

    /* ------ Font-Size ------ */
    --text-base: 16px; /* Only Update this BASE Font Size*/

    /* Relative base multipliers (targets: 10,12,14,16,18,20,24px) */
    --scale-xxs: 0.625; /* 16 * 0.625 = 10px */
    --scale-xs: 0.75;   /* 16 * 0.75  = 12px */
    --scale-sm: 0.875;  /* 16 * 0.875 = 14px */
    --scale-lg: 1.125;  /* 16 * 1.125 = 18px */
    --scale-xl: 1.25;   /* 16 * 1.25  = 20px */
    --scale-2xl: 1.5;   /* 16 * 1.5   = 24px */
    --scale-4xl: 2.25;  /* 16 * 2.25  = 36px */

    /* Derived font-sizes */
    --text-xxs:  calc(var(--text-base) * var(--scale-xxs));
    --text-xs:  calc(var(--text-base) * var(--scale-xs));
    --text-sm:  calc(var(--text-base) * var(--scale-sm));
    --text-md:  var(--text-base);
    --text-lg:  calc(var(--text-base) * var(--scale-lg));
    --text-xl:  calc(var(--text-base) * var(--scale-xl));
    --text-2xl: calc(var(--text-base) * var(--scale-2xl));
    --text-4xl: calc(var(--text-base) * var(--scale-4xl));

    /* General Color Variables */ 
    --black: #000;
    --white: #fff;
    /* Global fallback for the header background so off-header components (the detached Play
       Network dropdown, the footer directory) can read it. The .site-header rule overrides this
       locally with its v1/v2 selection, so the header itself is unaffected.
       NOTE: unicorn-global.css is enqueued AFTER the v-*.css design files, so any :root token
       defined here WINS over a v-*.css :root. That's why --pn-panel-bg is NOT defined here —
       it must stay overridable per design version (e.g. PlayPennsylvania → white). The switcher
       component reads var(--pn-panel-bg, var(--cc-header-bg)): a version sets --pn-panel-bg to
       override, otherwise it falls back to the header background defined below. */
    --cc-header-bg: var(--cc-header-bg-v2);
    /* Hover surface for cards/rows (Play Network footer directory). Subtle neutral overlay so it
       reads as a gentle highlight on both light and dark footer surfaces — NOT near-black.
       PLACEHOLDER: set to the Figma "surfaces/hover" value when available (per design version if
       it differs — but define overrides in the v-*.css files, not here, since unicorn-global.css
       loads last and would win). */
    --surfaces-hover: rgba(128, 128, 128, 0.16);
    /* Play Network "Switch state" button: white at rest, this on hover / while open. */
    --pn-btn-active: #BFBFBF;
    /* Play Network masthead strip: fixed dark bar + brand accent, same across sites (per design). */
    --pn-masthead-bg: #1F1F1F;
    --pn-brand-accent: #9C99FF;
    --cc-color-white: var(--white);
    --cc-color-black: var(--black);
    /* Near-black used by must-reads info panels. Was referenced but never defined,
       leaving white-on-transparent (unreadable); define it once here. */
    --black-chinese: #141210;

    --cc-color-orange: #FFC107; 

    --cc-color-scrollbar-track: #fafafc;
    --cc-color-scrollbar-thumb: #c7c9d9;
    --surface-channeliser: #FBF2DA;
    --dot-indicator: #c7c9d9;

    /* Alerts */

    --alert-positive-light: #F3FCF8;
    --alert-positive-dark: #06C270;
    --alert-positive-hover: #047745;
    /* Border/shadow depth line for the --alert-positive-dark claim/redeem buttons —
       repeated as a raw hex across several components; no existing token covered it. */
    --alert-positive-dark-shadow: #065F38;

    /* Gift-card reward tile gradient — pale ice-blue wash, same on every site. */
    --reward-gift-card-fill: #F0F6FF;
    --reward-gift-card-border-tint: #93C5FD;

    --alert-negative-light: #FEF5F5;
    --alert-negative-dark: #DC2626;
    --alert-negative-hover: #B81E1E;

    /* Warning — profile-page.scss's completion banner amber text; only -dark is consumed. */
    --alert-warning-dark: #92400E;

    /* Gold tint — the completion banner's gradient background. */
    --gold-tint-light: #FEF9C3;
    --gold-tint-dark: #FEF3C7;


    /* Greys lifted verbatim from the inline CSS on legacy WYSIWYG comparison tables, so a migrated table renders identically to an unmigrated one.
       The corpus was hand-authored, not themed, so they are the same on every site. */
    --legacy-table-border: #cccccc;
    --legacy-table-rule: #e5e5e5;
    /* general color vars end */

    /* Pros Cons block color vars start */
    --cons-block-bg-light: #FEF5F5;
    --pros-block-bg-light: #F3FCF8;
    /* Category */
    --surfaces-category-light: #e3edff;
    --text-category: var(--surfaces-category);
    --text-category-hover: #FFFFFF;
    --stroke-category: var(--surfaces-category);

    /* Gamification */
    --cta-gamification-btn: #3377FF;
    --cta-gamification-primary: hsla(0, 0%, 100%, .1);
    --cta-gamification-secondary: #ffc107;

    /* --gamification-header-primary is deliberately its own name, not a reuse of
       --cta-gamification-primary above (that one's a translucent glass background
       consumed elsewhere; this is a solid icon colour — sharing the name would have
       silently changed that too). */
    --gamification-header-primary: #29285E;
    --cta-gamification-nav-active: #3A3984;
    --gamification-progress-track: rgba(12, 61, 110, 0.12);
    --today-earned-pill-bg: rgba(255, 255, 255, 0.15);
    --today-earned-pill-color: #FFFFFF;

    /* PlayPerks gold (COS-159) — Figma's own token name, points at the gamification gold
       rather than repeating it. The 3D-button trio mirrors --cta-3d-primary-* below but for
       the gold accent button; text/shadow are Figma literals with no existing token behind them. */
    --surfaces-accent: var(--cta-gamification-secondary, #ffc107);
    --cta-3d-accent-surface: var(--surfaces-accent);
    --cta-3d-accent-hover: color-mix(in srgb, var(--cta-3d-accent-surface) 85%, black);
    --cta-3d-accent-text: #3a2c00;
    --cta-3d-accent-shadow: #323232;

    /* Casino Review Rating */
    --rating-container: #FFF9E6;
    --rating-verified-icon: #3377FF;
    --rating-icon: #FFC107;

    /* Readable text colour ON a --surfaces-primary background. Default = white;
       light-brand design versions (e.g. v-blue-2 cream) override to a dark value. */
    --on-surfaces-primary: var(--text-inverted);

    /* star color vars start */
    --cc-color-rating-back-star: #ccc;
    --cc-color-rating-front-star: #ffcc00;
    /* star color vars end */

   /* Sign Up button color vars with colorful header (v1) start */
    --cc-sign-up-button-bg-color-v1: var(--cta-navigation);
    --cc-sign-up-button-bg-color-hover-v1: var(--cta-navigation-hover);
    --cc-sign-up-button-hover-icon-color-v1: var(--cta-navigation-text-hover);
    --cc-sign-up-button-hover-icon-envelope-v1: var(--cta-navigation-text-hover);
    --cc-sign-up-button-hover-icon-part-v1: var(--cta-navigation);
    /* Sign Up button color vars with colorful header (v1) end */

    /* Sign Up button color vars with white header (v2) start */
    --cc-sign-up-button-bg-color-v2: var(--cc-color-brand);
    --cc-sign-up-button-bg-color-hover-v2: var(--cta-secondary-hover);
    --cc-sign-up-button-hover-icon-color-v2: var(--cc-color-brand);
    --cc-sign-up-button-hover-icon-envelope-v2: var(--cc-color-brand);
    --cc-sign-up-button-hover-icon-part-v2: var(--cc-color-brand);
    --cc-sign-up-button-icon-envelope-v2: #fff;
    /* Sign Up button color vars with white header (v2) end */

    /* Customer popup color vars start */
    --cc-sign-up-button-color: var(--cta-navigation-text);
    --cc-sign-up-button-hover-color: var(--cta-navigation-text-hover);
    --cc-sign-up-button-hide-bg: #fff;
    --cc-sign-up-button-hide-hover-bg: var(--cc-color-brand);
    --cc-sign-up-button-hide-color: #000;
    --cc-sign-up-button-hide-hover-color: #fff;

    --cc-cs-reloader-primary-color: var(--cta-navigation-text);
    --cc-cs-reloader-secondary-color: var(--cta-primary);
    --cc-cs-popup-opener-icon-color: var(--cta-navigation-text);
    --cc-cs-popup-opener-icon-envelope: var(--cta-navigation-text);
    --cc-cs-popup-opener-icon-part: var(--cta-navigation);

    --cc-cs-popup-boreder-color: #d0d5dd;
    --cc-cs-popup-error-color: #fda29b;
    --cc-cs-popup-checkbox-active-color: #fff;
    --cc-cs-popup-checkbox-active-bg: #000;

    .dynamic-select .dynamic-select-header .dynamic-select-header-placeholder,
    .cs-form-input.cs-form-input--search::placeholder,
    .cs-form-input.cs-form-input--search:focus::placeholder,
    .cs-form-control .cs-form-input::placeholder,
    .cs-form-control .cs-form-input:focus::placeholder {
        color: var(--text-secondary,#494745)!important; /* Replace with your desired color */
        opacity: 1!important;    /* Firefox adds a default opacity, so setting this to 1 ensures the color is vibrant */
    }
    /* Customer popup color vars end */

    /* Homepage Banner block v2 color vars start */
    /* Primary -> graded (darker) primary, same formula as --cc-steps-background.
       Replaces the old brand-colour -> solid-black gradient, which pushed the
       banner bottom to pure black and made the dark banner copy unreadable there. */
    --cc-homepage-banner-v2-gradient: linear-gradient(180deg, var(--surfaces-primary) 0%, color-mix(in srgb, var(--surfaces-primary) 60%, #000 40%) 100%);
    --cc-homepage-banner-v2-image-gradient: linear-gradient(180deg, var(--cc-color-brand) 0%, rgba(0, 0, 0, 0.25) 100%);
    /* Solid base colours the banner gradients are built from — contrast-color()
       can't evaluate a gradient, so banner text derives its colour from these.
       Design versions overriding the gradients must override the matching base. */
    --cc-homepage-banner-v2-bg-base: var(--surfaces-primary);
    --cc-homepage-banner-v4-bg-base: var(--cc-homepage-banner-v2-bg-base);
    /* Homepage Banner block v2 color vars end */

    /* Avoid Casino block color vars start */
    --color-avoid-casinos-accent: var(--alert-negative-dark);
    --color-avoid-casinos-border: var(--alert-negative-dark);
    /* Avoid Casino block color vars end */

    /* Jump links block color vars start */
    --cc-jump-links-default-color: var(--cta-secondary);
    /* Jump links block color vars end */

    /* Casino Review color vars start */
    --cc-casino-review-btn--hover-bg: var(--white);
    --cc-casino-review-wrapper-bg: var(--cc-color-brand);
	--cc-casino-review-textbox-bg: var(--cta-primary);
	--cc-crt-hero-copy-btn-color: var(--white);
    --cc-crt-hero-demotext-shadow: rgba(0, 0, 0, 0.25);
    /* Casino Review color vars start */

    /* Slots popup color vars start */
    --cc-slots-popup-promo-bg: rgba(61, 60, 111, 0.05);
    --cc-border-neutral-soft: #CCCCCC;
    --cc-surface-neutral-soft: #F1F1F1;
    --cc-text-primary-soft: #2B2B2BED;

    --admin-error-bg: #DC3545;
    --admin-error-border: #C82333;
    --admin-toggle-on: #2196F3;

    --user-points-tooltip-bg: #333333;
    --user-points-tooltip-bg-strong: #3B3B3B;

    --cc-surface-info-banner-soft: #2269B31A;

    --user-box-border-strong: #D9D9D9;
    --user-box-shadow: #0000001F;
    --user-box-backdrop-bg: #2B2B2B54;
    --user-box-link-color: #343A40;

    --forgot-password-error-bg: #FF24041A;
    --forgot-password-input-shadow: #1018280D;

    --cc-surface-disabled-bg: #D0D5DD4D;
    --modal-error-bg: #F8D7DA;
    
    --cc-slots-popup-bg: linear-gradient(to bottom, #ED4055, #B22435);
    --cc-slots-popup-logo-wrap-bg: rgba(61, 60, 111, 0.05);
    --cc-slots-popup-rating-bg: rgba(61, 60, 111, 0.05);
    --cc-slots-popup-btn-bg: #B22435;
    --cc-slots-popup-btn-hover-bg: rgba(178, 36, 53, .95);
    --cc-slots-popup-slots-bg: rgba(0, 0, 0, 0.55);
    /* Slots popup color vars end */

    /* Image text cards block color vars start */
    --cc-itc-card-bg: var(--white);
    /* Image text cards block color vars end */

    /* Tab navigation block links color vars start */
    --cc-color-links-top-navigation: var(--text-link);
    /* Tab navigation block links color vars end */

    /* Steps block color vars start */
    /* Unified steps background: primary -> graded (darker) primary. Shared by the
       step header bar and the step index badge. */
    --cc-steps-background: linear-gradient(90deg, var(--surfaces-primary) 0%, color-mix(in srgb, var(--surfaces-primary) 60%, #000 40%) 100%);
    /* Steps block color vars end */

    /* PlayPerks Banner block color vars start (COS-159) */
    /* Primary -> graded (darker) primary, same formula as --cc-steps-background. */
    --cc-playperks-banner-background: linear-gradient(180deg, var(--surfaces-primary) 0%, color-mix(in srgb, var(--surfaces-primary) 60%, #000 40%) 100%);
    /* COS-159 — lifts the PlayPerks bottom sheet and its collapsed pill off the
       page. Needed because both use --surfaces-primary, which on a PlayPerks
       landing page is also the colour of the cards they float over. */
    --cc-playperks-banner-scrim: #00000059;
    --cc-playperks-sheet-shadow: #00000040;
    /* PlayPerks Banner block color vars end */

    
    /* Footer vars start */
    --cc-color-background-footer: var(--surfaces-footer);
    --cc-color-footer-divider: var(--border-stroke);
    /* Footer vars end */

    /* 3d Effect button vars start */
    /* Shared green surface for the 3D push button — kept constant across all sites
       (decoupled from per-site --cta-primary so the button is green everywhere). */
    --cta-3d-primary-surface: #1BB56E;
    --cta-3d-primary-hover: color-mix(in srgb, var(--cta-3d-primary-surface) 55%, black);
    --cta-3d-primary-border: color-mix(in srgb, var(--cta-3d-primary-surface) 30%, black);
    /* 3d Effect button vars end */

    /* Bonus Harvester card vars start */
    --bonus-harvester-claim-hover: var(--cta-3d-primary-surface);
    --bonus-harvester-card-base: var(--surfaces-secondary);
    /* Bonus Harvester card vars end */

    /* POW-1825 — Rewards Shop v2 color vars start */
    /* Aliases of existing tokens (brand/CTA/alert), scoped semantically for the
       shop redesign, rather than new hex — re-point per site in that site's
       v-*.css if a shop-specific palette is ever needed. */
    --rewards-balance-bg: linear-gradient(90deg, var(--cta-secondary), var(--cta-secondary-hover));
    --rewards-balance-text: var(--white);
    --rewards-filter-pill-bg: var(--surfaces-background);
    --rewards-filter-pill-border: var(--border-stroke);
    --rewards-filter-pill-text: var(--text-secondary);
    --rewards-filter-pill-active-bg: var(--cta-secondary);
    --rewards-filter-pill-active-text: var(--white);
    --rewards-group-separator-line: var(--border-stroke);
    --rewards-group-separator-icon: var(--cc-color-orange);
    --reward-item-badge-bg: var(--alert-positive-light);
    --reward-item-badge-text: var(--alert-positive-dark);
    --rewards-empty-state-text: var(--text-secondary);
    /* redeem_success.php's gold gradient panel (Manual masked-code AND Task 9's
       Auto CLAIM NOW branch both render inside .redeem-success-content) + the
       Auto branch's green CLAIM NOW button — reuse the shared 3D-button green
       (--cta-3d-primary-surface) rather than mint a new colour, per CLAUDE.md
       § CSS colours. */
    --redeem-success-panel-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--cc-color-orange) 100%);
    --redeem-success-claim-button-bg: var(--cta-3d-primary-surface);
    --redeem-success-claim-button-hover-bg: var(--cta-3d-primary-hover);
    --redeem-success-claim-button-text: var(--white);
    /* POW-1825 — Rewards Shop v2 color vars end */
}

/* Casino Review design V4 color vars start */
.crt-hero--v4 .crt-hero-basic {
	--cc-casino-review-btn-bg: var(--white);
	--cc-casino-review-btn-color: var(--black);
}
/* Casino Review design V4 color vars end */