/*
 * CrownCore Multi-Skin System
 * Each skin redefines all color variables on body.skin-{name}
 * Default skin = no class needed (uses :root values from core.css)
 */

/* ========================================
   Skin 1: Royal Navy (Default)
   Deep navy & lime — the original CrownCore palette.
   ======================================== */
body.skin-default {
  --color-white: #ffffff;
  --color-gray: #cccccc;
  --color-light: #f3f3f3;
  --color-dark: #1c1c1c;
  --color-main: #091846;
  --color-main-mid: #6e79ab;
  --color-main-light: #091846;
  --color-header: #1c2453;
  --color-mobile-menu: #20295f;
  --color-main-title: #e8edfc;
  --color-accent: #d3ff06;
  --color-main-card: #323962;
  --button-gradient: linear-gradient(180deg, #d5fe06, #d5fe06 55%, #a8cc05);
}

/* ========================================
   Skin 2: Jackpot Red
   Classic casino red & black — high-stakes energy.
   ======================================== */
body.skin-jackpot-red {
  --color-white: #ffffff;
  --color-gray: #b0a8a8;
  --color-light: #f5f0f0;
  --color-dark: #1a0a0a;
  --color-main: #1a0a0a;
  --color-main-mid: #8c3a3a;
  --color-main-light: #2d1010;
  --color-header: #200c0c;
  --color-mobile-menu: #2a0e0e;
  --color-main-title: #fce8e8;
  --color-accent: #e63946;
  --color-main-card: #3d1a1a;
  --button-gradient: linear-gradient(180deg, #e63946, #e63946 55%, #b22d37);
}

body.skin-jackpot-red {
  .suptitle,
  .btn-theme,
  .primary-button {
    color: var(--color-main-title);
  }

  .primary-button.icon svg path {
    stroke: var(--color-main-title);
    fill: var(--color-main-title);
  }

  .close-menu svg path,
  .crwncor-burger svg path {
    fill: var(--color-main-title);
  }
}

/* ========================================
   Skin 3: Golden Casino
   Luxury black & gold — VIP lounge feel.
   ======================================== */
body.skin-golden-casino {
  --color-white: #ffffff;
  --color-gray: #a8a08c;
  --color-light: #f5f3ed;
  --color-dark: #0d0d0d;
  --color-main: #0d0d0d;
  --color-main-mid: #8a7a4a;
  --color-main-light: #1a1a10;
  --color-header: #141410;
  --color-mobile-menu: #1a1a12;
  --color-main-title: #fdf8e8;
  --color-accent: #d4a017;
  --color-main-card: #2a2a1a;
  --button-gradient: linear-gradient(180deg, #d4a017, #d4a017 55%, #b8880f);
}

body.skin-golden-casino {
  .suptitle,
  .btn-theme,
  .primary-button {
    color: var(--color-main-title);
  }

  .primary-button.icon svg path {
    stroke: var(--color-main-title);
    fill: var(--color-main-title);
  }

  .close-menu svg path,
  .crwncor-burger svg path {
    fill: var(--color-main-title);
  }
}

/* ========================================
   Skin 4: Neon Vegas
   Electric neon nightlife — the Strip at midnight.
   ======================================== */
body.skin-neon-vegas {
  --color-white: #ffffff;
  --color-gray: #a898b8;
  --color-light: #f5f0fa;
  --color-dark: #0f0326;
  --color-main: #0f0326;
  --color-main-mid: #7a4a8c;
  --color-main-light: #1a0840;
  --color-header: #140535;
  --color-mobile-menu: #1a0840;
  --color-main-title: #f8e8fc;
  --color-accent: #ff2d95;
  --color-main-card: #2e1050;
  --button-gradient: linear-gradient(180deg, #ff2d95, #ff2d95 55%, #d41878);
}

body.skin-neon-vegas {
  .suptitle,
  .btn-theme,
  .primary-button {
    color: var(--color-main-title);
  }

  .primary-button.icon svg path {
    stroke: var(--color-main-title);
    fill: var(--color-main-title);
  }

  .close-menu svg path,
  .crwncor-burger svg path {
    fill: var(--color-main-title);
  }
}

/* ========================================
   Skin 5: Royal Flush
   Regal purple & gold — poker royalty.
   ======================================== */
body.skin-royal-flush {
  --color-white: #ffffff;
  --color-gray: #b0a0c0;
  --color-light: #f5f0fa;
  --color-dark: #1a0933;
  --color-main: #1a0933;
  --color-main-mid: #7856a0;
  --color-main-light: #24104a;
  --color-header: #1e0c3e;
  --color-mobile-menu: #241048;
  --color-main-title: #f0e6ff;
  --color-accent: #ffd700;
  --color-main-card: #3a1e66;
  --button-gradient: linear-gradient(180deg, #ffd700, #ffd700 55%, #ccac00);
}

/* ========================================
   Skin 6: Ocean Bet
   Deep sea teal & cyan — underwater treasure.
   ======================================== */
body.skin-ocean-bet {
  --color-white: #ffffff;
  --color-gray: #8cb8c8;
  --color-light: #edf8fb;
  --color-dark: #041c2c;
  --color-main: #041c2c;
  --color-main-mid: #3a7a90;
  --color-main-light: #0a2840;
  --color-header: #082436;
  --color-mobile-menu: #0c2a3e;
  --color-main-title: #e0f5fc;
  --color-accent: #00e5ff;
  --color-main-card: #163848;
  --button-gradient: linear-gradient(180deg, #00e5ff, #00e5ff 55%, #00b8cc);
}

/* ========================================
   Skin 7: Midnight Poker
   Dark green-black & emerald — late night table.
   ======================================== */
body.skin-midnight-poker {
  --color-white: #ffffff;
  --color-gray: #8cb8a0;
  --color-light: #edf8f2;
  --color-dark: #0a1a0a;
  --color-main: #0a1a0a;
  --color-main-mid: #3a8c5a;
  --color-main-light: #102a14;
  --color-header: #0e220e;
  --color-mobile-menu: #122a14;
  --color-main-title: #e0fce8;
  --color-accent: #00c853;
  --color-main-card: #1e3a24;
  --button-gradient: linear-gradient(180deg, #00c853, #00c853 55%, #009e42);
}

/* ========================================
   Skin 8: Ruby Slots
   Dark crimson & ruby — spinning reels glow.
   ======================================== */
body.skin-ruby-slots {
  --color-white: #ffffff;
  --color-gray: #c0a0a8;
  --color-light: #faf0f2;
  --color-dark: #2a0a14;
  --color-main: #2a0a14;
  --color-main-mid: #9c4060;
  --color-main-light: #3a1020;
  --color-header: #30101c;
  --color-mobile-menu: #381222;
  --color-main-title: #fce0e8;
  --color-accent: #e0115f;
  --color-main-card: #4a1a30;
  --button-gradient: linear-gradient(180deg, #e0115f, #e0115f 55%, #b80e4e);
}

body.skin-ruby-slots {
  .suptitle,
  .btn-theme,
  .primary-button {
    color: var(--color-main-title);
  }

  .primary-button.icon svg path {
    stroke: var(--color-main-title);
    fill: var(--color-main-title);
  }

  .close-menu svg path,
  .crwncor-burger svg path {
    fill: var(--color-main-title);
  }
}

/* ========================================
   Skin 9: Diamond Ice
   Cool steel blue & icy silver — crystal clarity.
   ======================================== */
body.skin-diamond-ice {
  --color-white: #ffffff;
  --color-gray: #9cb8cc;
  --color-light: #f0f6fa;
  --color-dark: #0c1929;
  --color-main: #0c1929;
  --color-main-mid: #5a8aaa;
  --color-main-light: #142638;
  --color-header: #101e30;
  --color-mobile-menu: #142436;
  --color-main-title: #dceef8;
  --color-accent: #a8d8ea;
  --color-main-card: #243a4e;
  --button-gradient: linear-gradient(180deg, #a8d8ea, #a8d8ea 55%, #7abcd4);
}

/* ========================================
   Skin 10: Lucky Clover
   Forest green & gold — Irish luck.
   ======================================== */
body.skin-lucky-clover {
  --color-white: #ffffff;
  --color-gray: #98b8a0;
  --color-light: #f0f8f0;
  --color-dark: #0a1f0a;
  --color-main: #0a1f0a;
  --color-main-mid: #4a8a4a;
  --color-main-light: #122e12;
  --color-header: #0e240e;
  --color-mobile-menu: #142c14;
  --color-main-title: #e6fce6;
  --color-accent: #f5c518;
  --color-main-card: #1e3e1e;
  --button-gradient: linear-gradient(180deg, #f5c518, #f5c518 55%, #c9a010);
}

/* ========================================
   Skin 11: High Roller
   Charcoal & amber — whiskey lounge heat.
   ======================================== */
body.skin-high-roller {
  --color-white: #ffffff;
  --color-gray: #c0b098;
  --color-light: #f8f4ed;
  --color-dark: #1a1410;
  --color-main: #1a1410;
  --color-main-mid: #8a7050;
  --color-main-light: #261e18;
  --color-header: #201a14;
  --color-mobile-menu: #261e16;
  --color-main-title: #faf0e0;
  --color-accent: #ff8c00;
  --color-main-card: #3a3028;
  --button-gradient: linear-gradient(180deg, #ff8c00, #ff8c00 55%, #cc7000);
}

/* ========================================
   Skin 12: Spin Palace
   Deep wine & rose — glamorous roulette.
   ======================================== */
body.skin-spin-palace {
  --color-white: #ffffff;
  --color-gray: #c0a0b8;
  --color-light: #faf0f6;
  --color-dark: #2a0a2a;
  --color-main: #2a0a2a;
  --color-main-mid: #9c4090;
  --color-main-light: #3a103a;
  --color-header: #301030;
  --color-mobile-menu: #381238;
  --color-main-title: #fce0f8;
  --color-accent: #ff4081;
  --color-main-card: #4a1a48;
  --button-gradient: linear-gradient(180deg, #ff4081, #ff4081 55%, #d43268);
}

/* ========================================
   Skin 13: Ace Black
   Monochrome luxury — understated elegance.
   ======================================== */
body.skin-ace-black {
  --color-white: #ffffff;
  --color-gray: #999999;
  --color-light: #f0f0f0;
  --color-dark: #0a0a0a;
  --color-main: #0a0a0a;
  --color-main-mid: #666666;
  --color-main-light: #141414;
  --color-header: #111111;
  --color-mobile-menu: #151515;
  --color-main-title: #e8e8e8;
  --color-accent: #c0a44d;
  --color-main-card: #262626;
  --button-gradient: linear-gradient(180deg, #c0a44d, #c0a44d 55%, #9a833d);
}

/* ========================================
   Skin 14: Crypto Bet
   Cyber dark & electric purple — blockchain vibes.
   ======================================== */
body.skin-crypto-bet {
  --color-white: #ffffff;
  --color-gray: #9898c0;
  --color-light: #f0f0fa;
  --color-dark: #0a0e1a;
  --color-main: #0a0e1a;
  --color-main-mid: #5050a0;
  --color-main-light: #121830;
  --color-header: #0e1228;
  --color-mobile-menu: #14182e;
  --color-main-title: #e0e4fc;
  --color-accent: #6c5ce7;
  --color-main-card: #242850;
  --button-gradient: linear-gradient(180deg, #6c5ce7, #6c5ce7 55%, #5648c0);
}

body.skin-crypto-bet {
  .suptitle,
  .btn-theme,
  .primary-button {
    color: var(--color-main-title);
  }

  .primary-button.icon svg path {
    stroke: var(--color-main-title);
    fill: var(--color-main-title);
  }

  .close-menu svg path,
  .crwncor-burger svg path {
    fill: var(--color-main-title);
  }
}

/* ========================================
   Skin 15: Tropicana
   Tropical dark & coral — island casino heat.
   ======================================== */
body.skin-tropicana {
  --color-white: #ffffff;
  --color-gray: #a8b8a0;
  --color-light: #f4f8f0;
  --color-dark: #0d1f14;
  --color-main: #0d1f14;
  --color-main-mid: #4a7a58;
  --color-main-light: #162e1e;
  --color-header: #12261a;
  --color-mobile-menu: #182c20;
  --color-main-title: #e6f8ec;
  --color-accent: #ff6b35;
  --color-main-card: #243e2e;
  --button-gradient: linear-gradient(180deg, #ff6b35, #ff6b35 55%, #d4572a);
}

body.skin-crypto-bet {
  .suptitle,
  .btn-theme,
  .primary-button {
    color: var(--color-header);
  }

  .primary-button.icon svg path {
    stroke: var(--color-header);
    fill: var(--color-header);
  }

  .close-menu svg path,
  .crwncor-burger svg path {
    fill: var(--color-header);
  }
}

/* ========================================
   Skin 16: Light Mode
   Predominantly off-white surfaces, dark text, purple (#6c5ce7) accent.

   NOTE: This theme was built dark-first, so several color variables are
   dual-purpose (e.g. --color-light is used both as a light surface AND as
   light text on dark sections, --color-main as both a dark section background
   AND as heading text). For a light skin we flip the variable VALUES so the
   common "text on dark" usages read correctly, then override the handful of
   places where those same variables were used as a dark BACKGROUND.

   Accessibility: all text/background pairings below meet WCAG 2.1 AA (>= 4.5:1
   for body text, >= 3:1 for UI boundaries). #6c5ce7 dips just under 4.5:1 as
   small text on off-white, so accent TEXT uses the slightly darker --accent-ink
   (#5a48d6) while the dominant #6c5ce7 is reserved for fills/buttons/badges
   that always carry white foregrounds.
   ======================================== */
body.skin-light {
  /* Layered off-white system — page is tinted, cards lift to white */
  --surface-base: #f5f3fd; /* page background (off-white, faint lilac) */
  --surface-soft: #efecfb; /* tinted full-width sections */
  --surface: #ffffff; /* cards / insets that should pop */
  --line: rgba(13, 23, 56, 0.12); /* hairline borders on light */
  --accent-ink: #5a48d6; /* AA-safe purple for accent TEXT */

  /* white stays white: it is white text on purple AND white card surfaces */
  --color-white: #ffffff;
  --color-gray: #d4cdf0;
  /* --color-light is overwhelmingly used as body text on dark sections, so it
     becomes dark here; the few background usages are overridden below. */
  --color-light: #1a2440;
  --color-dark: #14122a;
  /* --color-main stays dark: it drives headings, icons, badges and borders.
     Its dark-background usages are overridden below. */
  --color-main: #211d52;
  --color-main-mid: #cfc7ef;
  --color-main-light: #211d52;
  --color-header: #ffffff;
  /* card surfaces -> white so accent text on them keeps its AA margin */
  --color-mobile-menu: #ffffff;
  --color-main-title: #1c1840;
  --color-accent: #6c5ce7;
  --color-main-card: #ffffff;
  --button-gradient: linear-gradient(180deg, #6c5ce7, #6c5ce7 55%, #5a48d6);

  background-color: var(--surface-base);

  /* Full-width sections that used a dark background -> tinted off-white */
  .site-header.header-full,
  .icon-boxs,
  .author-info,
  .author-info--page,
  .author-content,
  .page-title,
  .casino-section,
  .wp-block-group,
  .responsible,
  .error-404.not-found,
  .trending-casino,
  .hero {
    background-color: var(--surface-soft);
  }

  .site-footer {
    background-color: var(--surface-soft);
  }

  .site-footer__copyright {
    border-top-color: var(--line);
  }

  /* Inset boxes / cards -> white */
  .our-faq__item,
  .hero__box,
  .crwncor-mobile-menu,
  .listing-card__inner .listing-card__details .logo:before {
    background-color: var(--surface);
  }

  /* White-on-dark hairlines became invisible on light -> subtle dark hairlines */
  .casino-listing-block__casino,
  .hero__user,
  .author-info__stat,
  .author-info__box,
  .author-info__rec-card,
  .trending-casino__box,
  .icon-box,
  .related-posts__item {
    border-color: var(--line);
  }

  /* FAQ "+" badge stays a purple accent; keep its lines white */
  .our-faq__icon::after,
  .our-faq__icon::before {
    border-color: var(--color-white);
  }

  /* Elements that used white text on a dark background -> dark text */
  .author-info--page .author-info__text h2,
  .listing-card__rating .score span,
  .listing-card__rating .rating span,
  .listing-card__inner .listing-card__bonuses .listing-card__bonus {
    color: var(--color-main);
  }

  /* Solid accent surfaces carry WHITE foregrounds (dark-on-purple fails AA) */
  .suptitle,
  .btn-theme,
  .primary-button {
    color: var(--color-white);
  }

  .primary-button.icon svg path {
    stroke: var(--color-white);
    fill: var(--color-white);
  }

  .crwncor-burger svg path,
  .close-menu svg path {
    fill: var(--color-white);
  }

  /* Accent-colored TEXT -> darker purple so small text clears 4.5:1 on light */
  .main-navigation .current-menu-item > a,
  .main-navigation ul a:hover,
  .crwncor-mobile-menu-nav .menu-item.menu-item-has-children.is--active > a,
  .site-header .menu-item.menu-item-has-children:hover > a,
  .read-more-btn,
  .hero__user:hover .hero__user-text p:first-of-type,
  .pro-con :where(h1, h2, h3, h4, h5, h6),
  .author-info__stat-value,
  .author-info__section a,
  .author-info__rec-title a:hover,
  .author-page-title a:hover,
  .author-content__box h4 a:hover,
  .related-posts__title a:hover,
  .listing-card__inner .listing-card__bonuses:hover .subtitle {
    color: var(--accent-ink);
  }

  /* read-more outline -> filled purple on hover with white text */
  .read-more-btn:hover {
    color: var(--color-white);
  }

  /* Secondary (outline) button: readable on light surfaces */
  .secondary-button {
    color: var(--color-main);
    border-color: var(--color-accent);
  }

  .secondary-button:hover {
    color: var(--color-white);
  }

  /* Hard-coded lime bullets -> purple circle with a white "+" */
  .pro-con ul li:before,
  .listing-card__inner .bullets .bullet:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%236C5CE7' d='M6 11.25A5.25 5.25 0 1 0 6 .75a5.25 5.25 0 0 0 0 10.5'/%3E%3Cpath fill='%23ffffff' d='M5.25 3.5h1.5v5h-1.5z'/%3E%3Cpath fill='%23ffffff' d='M3.5 5.25h5v1.5h-5z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h12v12H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  }

  /* Bonus chips: replace the legacy lime borders with neutral / accent */
  .listing-card__inner .listing-card__bonuses {
    border-color: var(--line);
  }

  .listing-card__inner .listing-card__bonuses:hover {
    border-color: var(--color-accent);
  }

  /* Table header: accent fill keeps WHITE text (dark-on-purple fails AA) */
  .wp-block-table thead,
  .wp-block-table thead th,
  .wp-block-table thead td {
    color: var(--color-white);
  }

  .hero {
    background-image: none !important;
  }

  /* Floating fixed button must stay white on its accent fill */
  .haui-fixed-btn,
  .haui-fixed-btn a,
  .haui-fixed-btn span {
    color: var(--color-white);
  }

  /* Gutenberg heading block with a background -> blend like the hero */
  .wp-block-heading.has-background,
  .wp-block-heading.has-text-color.has-background {
    background-color: var(--surface-soft);
  }

  /* Floating nav bar: soft lilac tint + subtle hairline (dark indigo border
     was too heavy on a light header) */
  .nav_container {
    background-color: #fff;
    border-color: var(--line);
    box-shadow: 0 1px 3px rgba(13, 23, 56, 0.06);
  }
  .main-navigation .current-menu-item > a {
    color: var(--color-dark);
  }

  h2.wp-block-heading.has-text-align-center.has-white-color.has-text-color.has-background.has-link-color,
  h2.wp-block-heading.has-text-align-center.has-black-color.has-text-color.has-background.has-link-color {
    background-color: var(--surface-soft) !important;
    color: var(--color-dark) !important;
    font-size: 2.75em;
  }

  @media only screen and (max-width: 767px) {
    h2.wp-block-heading.has-text-align-center.has-white-color.has-text-color.has-background.has-link-color,
    h2.wp-block-heading.has-text-align-center.has-black-color.has-text-color.has-background.has-link-color {
      font-size: 1.6em;
    }
  }
  .haui-fixed-text {
    color: #fff;
  }
  .bonus-card {
    border-color: #fff;
  }
  .bonus-title,
  .bonus-code span {
    color: var(--accent-ink);
  }

  .listing-card__inner .listing-card__bonuses {
    border: 1px solid rgba(112, 157, 255, 0.15);
  }

  .listing-card__inner .listing-card__bonuses:hover .subtitle {
    text-shadow: 0 0 24px #6c5ce76d;
  }
  .haui-center-popup {
    background: #fff;
  }
  .listing-card__inner .listing-card__bonuses {
    background: rgba(108, 92, 231, 0.1);
  }
  .haui-exit-inner {
    background:
      radial-gradient(
        circle at 15% 85%,
        color-mix(in srgb, var(--color-gray) 80%, transparent) 0%,
        transparent 50%
      ),
      radial-gradient(
        circle at 85% 15%,
        color-mix(in srgb, var(--color-gray) 100%, transparent) 0%,
        transparent 50%
      ),
      radial-gradient(
        circle at 50% 50%,
        color-mix(in srgb, var(--color-gray) 60%, transparent) 0%,
        transparent 70%
      );
  }

  .bonus-subtitle,
  .bonus-code,
  .haui-big {
    color: var(--color-light);
  }

  .primary-button,
  .haui-fixed-btn {
    background: linear-gradient(180deg, #30e14a, #22c55e);
    color: #fff;
    border-color: #22c55e;
  }
  .primary-button:hover {
    box-shadow: 0 0px 12px 0 #30e14a78;
  }

  .haui-exit-marquee .emoji {
    display: none !important;
  }

  .haui-exit-marquee {
    animation: haui-exit-scroll 60s linear infinite;
  }

  .haui-popup-inner .btn-theme {
    background: linear-gradient(180deg, #30e14a, #22c55e);
    border-color: #22c55e;
  }
  .haui-exit-marquee span {
    font-size: 12em;
    opacity: 0.07;
    letter-spacing: -0.1em;
  }
}

@keyframes haui-exit-btn-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 #6f65b6 !important;
  }
  50% {
    transform: scale(1.01);
    box-shadow: 0 0 10px 6px #867dc53d !important;
  }
}