/* ============================================================
   JamSlots recolor — dark charcoal + magenta/purple accent.
   Overrides the theme design tokens (loaded after #brand-styles,
   so these :root values win and cascade into every --main-* var).
   Edit values here to re-tune the palette; no need to touch HTML.
   ============================================================ */
:root {
  /* ---- Dark backgrounds: green-black ramp -> charcoal/navy ---- */
  --color-background-page: #15141c;
  --color-menu-background: #15141c;
  --color-dark-grey-0: #15141c;

  --color-background-surface-1: #1c1b25;
  --color-dark-grey-1: #1c1b25;
  --color-modal-background: #1c1b25;
  --color-modal-background-start: #1c1b25;
  --color-modal-background-finish: #1c1b25;
  --color-card-game-card-background: #1c1b25;
  --color-calendar-surface-background: #1c1b25;

  --color-background-surface-2: #23222e;
  --color-dark-grey-2: #23222e;
  --color-modal-divider-background: #23222e;
  --color-modal-divider-background-start: #23222e;
  --color-modal-divider-background-finish: #23222e;
  --color-modal-status-background: #23222e;
  --color-modal-status-background-start: #23222e;
  --color-modal-status-background-finish: #23222e;
  --color-calendar-range-background: #23222e;

  --color-background-surface-3: #2c2a39;
  --color-dark-grey-3: #2c2a39;

  --color-background-surface-4: #383649;
  --color-dark-grey-4: #383649;

  --color-background-surface-5: #46435a;
  --color-dark-grey-5: #46435a;

  /* ---- Primary accent: gold -> magenta/purple ---- */
  --color-background-primary: #bf2cd6;
  --color-text-primary: #cf5cf0;
  --color-title-basic-icon-container-icon: #cf5cf0;

  /* primary button gradient (purple -> magenta) + white text */
  --color-button-fill-primary-background-start: #a32be2;
  --color-button-fill-primary-background-finish: #cf27c4;
  --color-button-fill-primary-background-start-hover: #b545ee;
  --color-button-fill-primary-background-finish-hover: #df47d6;
  --color-button-fill-primary-background-start-active: #8f23bd;
  --color-button-fill-primary-background-finish-active: #ad1fa6;
  --color-button-fill-primary-text: #ffffff;
  --color-button-fill-primary-text-hover: #ffffff;
  --color-button-fill-primary-text-active: #ffffff;
  --color-button-fill-primary-icon-container-icon: #ffffffcc;
  --color-button-fill-primary-icon-container-icon-hover: #ffffffe5;
  --color-button-fill-primary-icon-container-icon-active: #ffffffcc;

  --color-button-fill-primary-progress-background-start: #a32be2;
  --color-button-fill-primary-progress-background-finish: #cf27c4;
  --color-button-fill-primary-progress-background-start-hover: #b545ee;
  --color-button-fill-primary-progress-background-finish-hover: #df47d6;
  --color-button-fill-primary-progress-background-start-active: #8f23bd;
  --color-button-fill-primary-progress-background-finish-active: #ad1fa6;

  /* gold links -> magenta */
  --color-link-primary: #cf5cf0;
  --color-link-active: #b23fd6;

  /* calendar gold accents -> magenta (low visibility, kept consistent) */
  --color-calendar-day-active-background: #9d2fb8;
  --color-calendar-day-active-background-active: #8f23bd;
  --color-calendar-day-active-background-hover: #b545ee;
  --color-calendar-day-active-background-focus: #b545ee;
  --color-calendar-day-active-focus: #df47d6;
  --color-calendar-day-inactive-today: #cf5cf0;

  /* ---- Greenish text -> neutral lavender-grey ---- */
  --color-text-base: #d6d1e2;
  --color-link-default: #d6d1e2;
  --color-menu-base: #d6d1e2;
  --color-menu-horizontal: #b3acc8;
  --color-text-secondary: #a59ec0;
  --color-text-muted: #7d7693;
  --color-modal-description: #a59ec0;
  --color-title-basic-description: #a59ec0;
  --color-modal-status-basic-icon: #d6d1e2;

  /* Success / warning kept semantic (green badge stays green) */
}

/* New brand logo is ~square (theme slot expected a wide logo) -> size by height.
   Target the header (.head-cont) selector + !important so it beats the theme's
   `.head-cont .logo-img{max-width:100px}` for BOTH desktop and mobile logos
   (mobile-logo shows at <=1200px, which is why it looked small before). */
.head-cont .logo-img { height: 60px !important; width: auto !important; max-width: none !important; top: 0; }
.footer-logo { height: 64px !important; width: auto !important; max-width: none !important; }