:root {
    /* ===========================================
       BASE THEME
       =========================================== */
    --nav-header-bg: #C44101;
    --nav-header-bg-to: #B83D02;
    /* Has to do this to support opaque backgrounds */
    --main-bg-rgb: 1 1 1;
    --main-bg-to-rgb: 31 31 31;
    --main-bg: rgb(var(--main-bg-rgb));
    --main-bg-to: rgb(var(--main-bg-to-rgb));
    --main-area-base: transparent;
    --main-area-base-to: transparent;
    /* Primary accent (review #14). Used by the deposit/withdraw provider selection and the
       Tailwind modals (Info / Success / LostPassword / NewPassword: title underline + OK button).
       Figma's solid accent is #093B98, its hover the #0A2860 -> #010815 pair. Was sunclub yellow. */
    --custom-bg: #093B98;
    --custom-bg-disabled: #0A2860;
    --custom-hover: #0A2860;
    --custom-hover-disabled: #010815;
    --maintenace-background: #C44101;
    --footer-bg: #C44101;
    --footer-bg-to: #A63600;

    /* ===========================================
       TEXT
       =========================================== */
    --main-text: #fff;
    --main-buttontext: #fff;
    --custom-buttontext: #301809;
    --hyperlink-color: #ffffff;
    --hyperlink-color-hover: #ddd;

    /* ===========================================
       ICONS
       =========================================== */
    --custom-icon: #301405;
    --custom-search-icon: #888888;
    --custom-search-icon-hover: #138d43;
    --user-icon: #fff;
    --hamburger-icon: #cdcdcd;
    --hamburger-icon-hover: #ddd;
    --support-icon: #ffffff;

    /* ===========================================
       SIDEBAR
       =========================================== */
    --sidebar-menu-bg: #010101;
    --sidebar-menu-bg-to: #1F1F1F;
    --sidebar-menu-mainitem-bg: #DA591A;
    --sidebar-menu-mainitem-bg-to: #D04B08;
    --sidebar-menu-mainitem-hover-bg: #B63401;
    --sidebar-menu-mainitem-hover-bg-to: #B63401;
    --sidebar-menu-subitem-bg: rgba(9, 59, 152, 0.78);
    --sidebar-menu-subitem-bg-to: rgba(3, 19, 50, 0.78);
    --sidebar-menu-subitem-hover-bg: rgba(10, 40, 96, 0.78);
    --sidebar-menu-subitem-hover-bg-to: rgba(1, 8, 21, 0.78);
    --sidebar-menu-subitem-casino-bg: transparent;
    --sidebar-menu-subitem-casino-bg-to: transparent;
    --sidebar-menu-subitem-casino-hover-bg: transparent;
    --sidebar-menu-subitem-casino-hover-bg-to: transparent;
    --sidebar-menu-subitem-casino-text: #fff;
    --sidebar-menu-subitem-casino-text-hover: #ccc;
    --sidebar-menu-text: #fff;
    --sidebar-menu-text-hover: #fff;
    --sidebar-menu-text-active: #ffc114;
    --sidebar-icon-hover: #B63401;

    /* ===========================================
       NAVIGATION BAR
       =========================================== */
    --nav-balance-bg: #222942;
    --nav-balance-bg-hover: #344270;
    --nav-balance-tx: #fff;
    --nav-user-bg: #2c170d;
    --nav-user-bg-hover: #304385;
    --nav-user-tx: #fff;
    --nav-deposit-bg: #1DD063;
    --nav-deposit-bg-hover: #85e8ac;
    --nav-deposit-tx: #060e2a;
    /* Account dropdown behind the logged-in username. These three variables are used by nothing
       else (only PersonalSettingsWidget's navUserMenu* classes), so they carry the whole
       component. They were sunclub brown; matched to the language dropdown next to them in the
       same header — dark panel, blue hover, white text — so the two read as one system. */
    --nav-user-menu-bg: #010101;
    --nav-user-menu-elem-bg-hover: #093B98;
    --nav-user-menu-tx: #FFFFFF;
    --nav-live-casino-color: #ffc114;

    /* ===========================================
       MODALS
       =========================================== */
    --modal-bg: #010101;
    --modal-bg-to: #1F1F1F;
    --modal-bg-deposit: #010101;
    --modal-header: #fff;
    --modal-body: #fff;
    --modal-header-bg: #C44101;
    --modal-header-border: #FFFFFF85;
    /* Close X. Most cryptocom modals render it as a transparent cut-out, so this only shows where
       that treatment does not apply (e.g. the tournament popup, which Figma paints #093B98). */
    --close-button: #093B98;
    --close-button-bg: #ffffff;
    --close-button-bg-hover: #e1dede;
    /* Tournament info popup header bar — Figma "Tournaments ablak" 441:997 'Frame 4' = #010101. */
    --modal-tournament-header-bg: #010101;
    /* Cryptocom: Welcome Package box background — user-specified blue gradient
       (was orange #DB5B1C). Only used by the login/signup modal gift box. */
    --login-gift-box-bg: linear-gradient(90deg, rgba(9, 59, 152, 0.78) 0%, rgba(3, 19, 50, 0.78) 100%);

    /* ===========================================
       FORMS - INPUTS
       =========================================== */
    --form-input-tx: #fff;
    /* Form fields. The modal inputs are already forced to the dark pill in site-overwrite.css;
       these cover every field we have not touched by hand (review #14, were sunclub orange). */
    --form-input-bg: #010101;
    --form-input-bg-act: #093B98;
    --form-input-border-act: #7a2f09;
    --form-input-svg: #fff;
    --form-input-svg-active: #fff;
    --placeholder-color: #444a5f;

    /* ===========================================
       FORMS - CHECKBOXES
       =========================================== */
    --form-cb-tx: #6c2e0d;
    --form-cb-tx-act: #C44101;
    --form-cb-bg: #C44101;
    --form-cb-bg-act: #fff;
    --form-cb-bo: #fff;
    --form-cb-bo-act: #fff;

    /* ===========================================
       BUTTONS - STANDARD
       =========================================== */
    --button-color: #fff;
    --button-color-hover: #C44101;
    --button-bg: transparent;
    --button-bg-hover: #fff 0%;
    --button-bg-hover-to: #D3D3D3 100%;
    --button-selected-bg: #fff;
    --button-bg-disabled: #A93305;
    --button-border: #fff;
    --button-border-hover: #C44101;
    --button-border-width: 2px;
    --button-radius: 5px;
    --button-radius-rounded: 5px;
    --button-glow: rgba(0,0,0, 0.25);
    --button-glow-hover: rgba(0,0,0, 0.25);
    --button-glow-pos: 0 4px 4px 0;
    --button-glow-pos-hover: 0 4px 4px 0;

    /* ===========================================
       BUTTONS - PRIMARY
       =========================================== */
    --primary-button-color: #C44101;
    --primary-button-color-hover: #C44101;
    --primary-button-bg: #FFFFFF;
    --primary-button-bg-to: #FFFFFF;
    --primary-button-bg-hover: #FFFFFF;
    --primary-button-bg-hover-to: #D3D3D3;
    --primary-button-border: #FFFFFF;
    --primary-button-border-hover: #FFFFFF;

    /* ===========================================
       BUTTONS - DARK
       =========================================== */
    --dark-button-color: #fff;
    --dark-button-color-hover: #fff;
    --dark-button-bg: #C44101;
    --dark-button-bg-to: #C44101;
    --dark-button-selected-bg: #ec570e;
    --dark-button-bg-hover: #B93400;
    --dark-button-bg-hover-to: #A93305;

    /* ===========================================
       CARDS
       =========================================== */
    --game-card-title: #fff;
    --game-card-provider: #fff;
    --game-card-description: #ffffff;
    --big-wins-card-bg: #C44101;
    --big-wins-amount-text: #ffffff;
    --game-card-background: #1E1E1E;
    --game-card-shadow-color: rgba(0,0,0,25%);
    --game-card-shadow-pos: 3px 3px 4px 0;

    /* ===========================================
       SELECT BOX
       =========================================== */
    /* Dropdown lists (DropdownWidget: RTP order, language, payment bonus select).
       Figma "Nyelvválasztó" 2002:1468 = panel #010101 -> #1F1F1F, and the list item
       component "Nyelvek" 2031:3352 = transparent by default, hover a #093B98 -> #031332
       pill. A variable cannot hold a gradient, so the hover/selected gradient itself is in
       site-overwrite.css; these two solids are the fallback. Were sunclub orange. */
    --select-box-bg: #010101;
    --select-box-bg-to: #1F1F1F;
    --select-box-bg-hover: #093B98;
    --select-box-bg-selected: #093B98;

    /* ===========================================
       CONTENT TITLES
       =========================================== */
    --main-title: #fff;
    /* Section-title icon colour and the small round title buttons (e.g. the RTP mobile order
       buttons, the View all count badge). Figma paints the titles white and those round buttons
       #093B98 (review #14; were sunclub orange). */
    --main-title-icon: #FFFFFF;
    --main-title-left-right-icon: #093B98;

    /* ===========================================
       STATUS COLORS
       =========================================== */
    --ok-text: #07be1a;
    --error: #f7b72b;

    /* ===========================================
       RTP INDICATORS
       =========================================== */
    --rtp-over-100-bg: #C44101;
    --rtp-over-100-text: #ffffff;
    --rtp-over-20-bg: #C44101;
    --rtp-over-20-text: #ffffff;
    --rtp-below-20-bg: #C44101;
    --rtp-below-20-text: #ffffff;

    /* ===========================================
       TOURNAMENT
       =========================================== */
    --tournament-active: #ffffff;
    --tournament-upcoming: #ffffff;
    --tournament-expired: #ffffff;
    /* State badge label. Figma 441:1003 = a WHITE pill with #093B98 text (the popup); on the
       tournament CARDS our own rule forces white on the blue gradient, so it is unaffected. */
    --tournament-state-text: #093B98;
    --account-transaction-withdraw: #d3d3d3;
    --account-transaction-deposit: #ffffff;
    --account-transaction-failed: #979797;

    /* ===========================================
       BONUS
       =========================================== */
    --bonus-bg-0: #99a1af;
    --bonus-bg-1: #00c951;
    --bonus-bg-2: #2b7fff;
    --bonus-bg-3: #fb2c36;
    --bonus-bg-4: #ad46ff;

    /* ===========================================
       SWIPER / CAROUSEL
       =========================================== */
    --swiper-pagination-top: 11rem;
    --swiper-pagination-color: #ffffff;
    --swiper-pagination-bullet-inactive-color: #C3C3C3;

    /* ===========================================
       CHAT
       =========================================== */
    --chat-header-background-color: #884119;
    --chat-header-text-color: #fff;

    /* ===========================================
       TABLES
       =========================================== */
    --table-header-color: #1F2937;
    --table-header-background: #FFFFFF99;
    /* Odd rows were a SOLID #093B98 band. With four of seven rows filled edge to edge the Top Wins
       table read as a wall of blue (reviewer, 2026-09-02); dropping it to a 30% tint keeps the
       striping legible while the blue accent moves to the bet and multiplier pills. */
    --table-odd-background: rgba(9, 59, 152, 0.30);
    --table-even-background: transparent;   /* 2nd row: transparent */
    --table-text: #fff;
    --table-topwins-bet-even-bg: #093B98;   /* bet pill on the transparent (even) rows */
    --table-topwins-bet-odd-bg: rgba(244, 144, 12, 0.41);  /* blue (odd) rows: overridden to a gradient in site-overwrite.css */
    --table-topwins-multiplier-text: #093B98;
    --table-topwins-multiplier-bg: #FFFFFF;

    /* ===========================================
       THIRD-PARTY (intl-tel-input)
       =========================================== */
    --iti-spacer-horizontal: 10px;
    --iti-arrow-color: #ffffff;

    /* ===========================================
       LAYOUT
       =========================================== */
    --lobby-promo-margin: 10%;
    --floating-panel-background: rgba(37, 44, 69, 0.65);
    --scrollbar-color: #698AF7;
    /* Backdrop of every rich-text description block (tournament popup, promotion details).
       Figma "Tournaments ablak" 441:997 = #010101 -> #1F1F1F; the var can only hold the solid,
       the gradient itself is on .modal-content in site-overwrite.css. Was sunclub orange. */
    --description-background: #010101;
    --page-content-bg: transparent; /* Figma: policy/content pages have no coloured box — text sits on the dark page bg (was orange #b63401) */
}