/*
 * 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);
  }
}