/* ============================================================
   Spin & Win design system — tokens, fonts, shared components.
   Ported from the approved prototype (ConsumerQuoting tokens).
   Page/component-specific rules live in scoped .razor.css files.
   ============================================================ */

/* --- Self-hosted fonts (variable-weight Google subsets; see wwwroot/fonts/OFL-NOTICE.txt) --- */

/* Inter — UI font */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-greek-ext.woff2') format('woff2');
    unicode-range: U+1F00-1FFF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-greek.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Work Sans — display font */
@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/work-sans-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/work-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/work-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Design tokens --- */
:root {
    --spin-text: #1A202C;
    --spin-muted: rgba(26, 32, 44, 0.7);
    --spin-faint: #b0bac8;
    --spin-primary: #3a6ef5;
    --spin-primary-text: #2d5ee0;
    --spin-border: #E2E8F0;
    --spin-border-light: #EDF2F7;
    --spin-input-border: #d8dee8;
    --spin-grad: linear-gradient(91deg, #5747f8, #00baf1);
    --spin-bg: #f7f8fa;
    --spin-font-display: 'Work Sans', 'Inter', system-ui, -apple-system, sans-serif;
    --spin-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --spin-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    --spin-shadow-btn: 0 4px 14px rgba(87, 71, 248, 0.25);
    --spin-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);

    /* The ground both wheels sit on — the landing hero and the whole of /spin. One token
       rather than two copies, because the two surfaces are meant to read as one place and
       a drifted gradient is the kind of difference nobody can name but everybody sees. */
    --spin-dark: linear-gradient(155deg, #2a1e73 0%, #1a1250 45%, #120d38 100%);
    --spin-dark-glow:
        radial-gradient(circle 620px at 72% 28%, rgba(124, 107, 255, 0.42), transparent 68%),
        radial-gradient(circle 520px at 12% 78%, rgba(0, 186, 241, 0.14), transparent 70%);
    --spin-on-dark: rgba(255, 255, 255, 0.72);
    --spin-on-dark-faint: rgba(255, 255, 255, 0.5);
}

/* --- Base. Replaces the template's Bootstrap reboot, which the app no longer
   loads; layouts assume border-box sizing and a zero-margin body. --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--spin-bg);
    color: var(--spin-text);
    font-family: var(--spin-font-display);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* Routes.razor focuses h1 on navigation — suppress the resulting outline */
h1:focus {
    outline: none;
}

/* --- Shared components (used across spin pages/overlays) --- */

.spin-gradient-text {
    background: var(--spin-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Primary CTA: gradient pill (desktop 12px radius; mobile full-width thumb target) */
.spin-btn-primary {
    display: inline-block;
    padding: 18px 36px;
    background: var(--spin-grad);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--spin-font-ui);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--spin-shadow-btn);
    width: 100%;
    max-width: 400px;
    transition: filter 0.2s ease;
}

.spin-btn-primary:hover {
    filter: brightness(1.08);
    color: #fff;
}

.spin-btn-primary:disabled {
    filter: none;
    opacity: 0.55;
    cursor: default;
}

/* Ghost CTA: outlined secondary action */
.spin-btn-ghost {
    display: inline-block;
    padding: 14px 24px;
    background: transparent;
    color: var(--spin-primary-text);
    border: 1px solid var(--spin-primary-text);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--spin-font-ui);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    max-width: 400px;
    transition: background-color 0.2s ease;
}

.spin-btn-ghost:hover {
    background-color: rgba(58, 110, 245, 0.08);
    color: var(--spin-primary-text);
}

@media (max-width: 767px) {
    .spin-btn-primary {
        max-width: none;
        min-height: 56px;
        border-radius: 8px;
        padding: 16px 24px;
    }

    .spin-btn-ghost {
        max-width: none;
        min-height: 52px;
        border-radius: 8px;
    }
}

/* Screen-reader-only text. Unscoped because more than one page needs it — the wheel's
   aria-live result announcement and the landing page's heading for the claimed state. */
.spin-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Small uppercase eyebrow/kicker line */
.spin-kicker {
    font-family: var(--spin-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--spin-primary);
}

/* Underlined text link (e.g. "Odds & official rules") */
.spin-link {
    background: none;
    border: none;
    padding: 4px 2px;
    color: var(--spin-primary);
    font-family: var(--spin-font-display);
    font-size: 1rem;
    font-weight: 400;
    text-decoration: underline;
    text-decoration-color: rgba(58, 110, 245, 0.4);
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.spin-link:hover {
    color: var(--spin-primary-text);
}

/* Blazor's unhandled-error banner. Global rather than scoped to a layout, and that is the
   whole point: blazor.web.js finds this element by id, so every layout carries its own
   copy of the div — SpinLayout and AdminLayout both do. Styling it from a .razor.css
   compiles the selector with that layout's scope attribute, so it matched SpinLayout's div
   and silently missed AdminLayout's, leaving "An unhandled error has occurred" pinned to
   the bottom of every admin page from the day that layout was added. One unscoped rule
   covers both, and any layout added later. */

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* --- Legal document pages --- */
/* /terms and /terms/general share one text treatment (mirroring the rules page's),
   so it lives here rather than duplicated across two scoped .razor.css files. */
.spin-legal {
    width: 100%;
    max-width: min(92vw, 745px);
    margin: 0 auto;
    padding: clamp(12px, 5dvh - 16px, 64px) 16px 60px;
    font-family: var(--spin-font-display);
}

/* Mirrors the rules page's .spin-rules-back (scoped there), like the rest of this
   treatment. */
.spin-legal-back {
    display: inline-block;
    padding: 0 0 20px;
    color: var(--spin-primary);
    font-family: var(--spin-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
}

.spin-legal-back:hover {
    color: var(--spin-primary-text);
}

.spin-legal-h1 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 10px 0 0;
    line-height: 1.15;
}

.spin-legal-updated {
    margin: 10px 0 0;
    font-family: var(--spin-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--spin-muted);
}

.spin-legal-body {
    margin-top: 26px;
    font-size: 14px;
    color: #5B6B86;
    line-height: 1.6;
}

.spin-legal-body h3 {
    font-size: 14px;
    font-weight: 800;
    color: var(--spin-text);
    margin: 24px 0 6px;
}

.spin-legal-body p {
    margin: 0 0 12px;
}

.spin-legal-body ul {
    margin: 0 0 12px;
    padding-left: 22px;
}

.spin-legal-body li {
    margin-bottom: 6px;
}

.spin-legal-body a {
    color: var(--spin-primary);
}

.spin-legal-related {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--spin-border);
}

@media (max-width: 767px) {
    .spin-legal {
        padding: 22px 18px 48px;
        max-width: 560px;
    }
}