/* ===========================================================================
   base.css — Casino Design System: base + reset + typography
   ---------------------------------------------------------------------------
   Everything in here is scoped under .casino-theme so it never leaks to
   pages that haven't opted in. Reset is minimal — we don't fight Bootstrap
   or FontAwesome on legacy pages. Only sets the player-facing defaults.

   Critical: all numeric content uses .num { font-variant-numeric: tabular-nums }
   so balances and amounts line up cleanly. Components must apply class="num"
   on any element rendering a number.
   =========================================================================== */

/* ---- Minimal reset, scoped ----------------------------------------------- */
.casino-theme,
.casino-theme *,
.casino-theme *::before,
.casino-theme *::after {
    box-sizing: border-box;
}

.casino-theme {
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--fs-md);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
}

/* ---- Typography ---------------------------------------------------------- */
.casino-theme h1,
.casino-theme h2,
.casino-theme h3,
.casino-theme h4,
.casino-theme h5,
.casino-theme h6 {
    font-family: var(--font-ui);
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
}

.casino-theme h1 { font-size: var(--fs-3xl); }
.casino-theme h2 { font-size: var(--fs-2xl); }
.casino-theme h3 { font-size: var(--fs-xl); }
.casino-theme h4 { font-size: var(--fs-lg); }
.casino-theme h5 { font-size: var(--fs-md); }
.casino-theme h6 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em; }

.casino-theme p {
    color: var(--text-secondary);
    margin: 0 0 var(--space-3);
}

.casino-theme a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: opacity var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.casino-theme a:hover { opacity: 0.85; }
.casino-theme a:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ---- Tabular numbers ----------------------------------------------------- */
/* Apply via class="num" on every balance / amount / time-ago / count. */
.num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1, "zero" 1;
    letter-spacing: 0;
}

/* ---- State color utilities (sparing use — prefer component classes) ----- */
.casino-theme .text-win     { color: var(--state-win); }
.casino-theme .text-loss    { color: var(--state-loss); }
.casino-theme .text-pending { color: var(--state-pending); }
.casino-theme .text-muted-c { color: var(--text-muted); }
.casino-theme .text-secondary-c { color: var(--text-secondary); }

/* ---- Reduced-motion guard ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .casino-theme *,
    .casino-theme *::before,
    .casino-theme *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- Casino main wrapper (set up by Prompt 4 header/footer shell) ------- */
.casino-main {
    /* Top padding leaves room for the sticky header. The header height
       (~72px) plus a bit of breathing room. Adjusted per breakpoint below. */
    padding-top: var(--space-9);
    padding-bottom: var(--space-10);
    min-height: 60vh;
}

@media (max-width: 768px) {
    .casino-main {
        padding-top: var(--space-7);
        padding-bottom: var(--space-9);
    }
}