/* Components */
@import "components/accordion.css";
@import "components/banner.css";
@import "components/button.css";
@import "components/category-button.css";
@import "components/footer.css";
@import "components/header.css";
@import "components/input.css";
@import "components/layout.css";
@import "components/modal.css";
@import "components/player-card.css";
@import "components/prize-card.css";
@import "components/profile-card.css";
@import "components/rank-card.css";
@import "components/typography.css";
@import "components/utils.css";
@import "components/vip-card.css";

/*Views*/
@import "views/auth.css";
@import "views/categories.css";
@import "views/content-upsell.css";
@import "views/general.css";
@import "views/home.css";
@import "views/menu.css";
@import "views/play.css";
@import "views/services.css";
@import "views/vip-upsell.css";
@import "views/welcome.css";
@import "views/winners.css";

/* Theme tokens for World Cup campaign */
:root {
    /* Primary surfaces */
    --color-bg-primary: #051139;
    --color-bg-secondary: #52A9DA;
    --color-bg-surface: #ffffff;

    /* Brand blues */
    --color-brand-primary: #2495d2;
    --color-brand-primary-dark: #00629a;
    --color-brand-navy: #012c59;

    /* Text */
    --color-text-primary: #012c59;
    --color-text-secondary: #00629a;
    --color-text-muted: #8E8FAA;
    --color-text-inverse-primary: #ffffff;

    /* Buttons */
    --color-button-primary-bg: #2495d2;
    --color-button-primary-border: #2495d2;
    --color-button-primary-text: #ffffff;
    --color-button-primary-disabled-bg: #98d3f3;
    --color-button-primary-disabled-border: #98d3f3;

    --color-button-outline-bg: #ffffff;
    --color-button-outline-border: #007ac0;
    --color-button-outline-text: #00629a;

    --color-button-correct-bg: #00bf8e;
    --color-button-correct-border: #00bf8e;
    --color-button-incorrect-bg: #ff4040;
    --color-button-incorrect-border: #ff4040;

    /* Accents */
    --color-accent-link: #2495d2;
    --color-accent-correct: #20daaa;
    --color-accent-incorrect: #ff4040;

    /* Main copy */
    --color-text-main: #051139;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body.body--bg-primary {
    background: var(--color-bg-primary);
}

body.body--white {
    background: var(--color-bg-surface);
}

body.body--primary-tint {
    background: var(--color-bg-secondary);
}

body, button, input {
    font-family: 'Poppins', sans-serif;
}

form {
    margin-block-end: 0;
}

* {
    box-sizing: border-box;
}