:root {
	/* ===== Base / Background ===== */
	--color-bg-primary: #F9F9F9; /* Light background */
	--color-bg-secondary: #FFFFFF; /* Cards, modals, tables */
	/* ===== Accent Colors ===== */
	--color-accent-red: #C0392B; /* Casino red */
	--color-accent-gold: #F1C40F; /* Gold / luxury highlight */
	--color-accent-green: #27AE60; /* Money / luck / active states */
	/* ===== Neutral Colors ===== */
	--color-gray-light: #BDC3C7; /* Borders, dividers */
	--color-black: #000; /* Text / secondary info */
	/* ===== Interactive / Hover States ===== */
	--color-red-hover: #E74C3C; /* Button hover / warnings */
	--color-gold-hover: #F39C12; /* Highlight hover */
	--color-green-hover: #2ECC71; /* Success / active hover */
	/* ===== Text Colors ===== */
	--color-text-primary: #2C3E50; /* Main text */
	--color-text-secondary: #7F8C8D; /* Secondary text */
	--color-text-inverse: #FFF; /* On dark backgrounds */
	/* ===== Font Sizes ===== */
	--font-size-xs: 0.75rem; /* Extra small text */
	--font-size-sm: 0.85rem; /* Small text, buttons */
	--font-size-base: 0.9rem; /* Base text size */
	--font-size-md: 1rem; /* Medium text */
	--font-size-lg: 1.1rem; /* Large text, section titles */
	--font-size-xl: 1.5rem; /* Extra large, headings */
	--font-size-2xl: 2rem; /* Major headings */
	/* ===== Box Shadows ===== */
	--shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for light elements */
	--shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15); /* Medium shadow for cards and sections */
	--shadow-button: 0 4px 12px rgba(39, 174, 96, 0.3); /* Green-tinted shadow for buttons */
	--shadow-button-active: 0 2px 8px rgba(39, 174, 96, 0.3); /* Reduced shadow for active button state */

	--page-padding: 1.5rem;

	--font-body: "Montserrat", sans-serif;
	--font-vip: "Cinzel", serif;
	--font-weight-vip: 700;

	--letter-spacing-code: 0.32em;
}

body {
	min-height: 100dvh;
	font-family: var(--font-body);
}

.vip-text {
	font-family: var(--font-vip);
	font-weight: var(--font-weight-vip);
}

.martian-mono {
	font-family: "Martian Mono", monospace;
}

.code-txt {
	font-family: "Martian Mono", monospace;
	letter-spacing: var(--letter-spacing-code);
}

button {
	user-select: none;
}

.page-padding {
	padding: var(--page-padding);
}

.button-black {
    width: 100%;
    padding: 1rem 1.5rem;
    background-color: var(--color-black);
    color: var(--color-text-inverse);
    border: none;
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    gap: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.button-black:not(:disabled):active {
	color: var(--color-accent-gold);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.button-black:disabled {
    background: var(--color-gray-light);
    cursor: not-allowed;
    box-shadow: none;
}

.code-qr > svg {
    width: 100%;
}