/* ════════════════════════════════════════════════════════════════════
   PUBLIC PAGES — FOUNDATION CSS
   ════════════════════════════════════════════════════════════════════
   Loaded by PublicLayout.razor for every /public/** route.

   Scope:  every selector here is prefixed with .pub-root so it CANNOT
           leak into admin pages or MudBlazor internals.

   Contents:
     1. Font imports (Inter + JetBrains Mono via Google Fonts)
     2. Theme tokens — light + dark
     3. Type scale (display / heading / body / label / mono)
     4. Spacing + radius scale
     5. Reusable components — buttons, pills, cards, stat tiles, hero
     6. Tournament gradient palette (8 deterministic hues)
   ════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════
   1. FONT IMPORTS
   ═══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');


/* ═══════════════════════════════════════
   2. THEME TOKENS
   ═══════════════════════════════════════
   Every colour the public pages use lives here as a CSS variable.
   The .pub-light and .pub-dark modifier classes on .pub-root swap
   the entire palette in one place — no per-component overrides
   scattered across files.

   Naming convention:
     --pub-bg-*    = background surfaces (page, card, raised, hover)
     --pub-text-*  = text colours (primary AAA, secondary AA, tertiary hint)
     --pub-border-*= borders (subtle, default, strong)
     --pub-brand   = primary accent (violet)
     --pub-success = green (live, open, paid)
     --pub-warning = amber (countdown, attention)
     --pub-danger  = red (closed, failed)
   ═══════════════════════════════════════ */

/* Tokens lifted to :root so they're available everywhere on the
       page, not just inside .pub-root. Values are unchanged. */
:root {
    /* — Type scale — shared across both themes — */
    --pub-font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
    --pub-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    --pub-text-display: 46px; /* hero page title          */
    --pub-text-h1: 28px; /* tournament name          */
    --pub-text-h2: 20px; /* section title            */
    --pub-text-h3: 17px; /* card title               */
    --pub-text-body: 15px; /* main body                */
    --pub-text-body-sm: 14px; /* secondary body           */
    --pub-text-label: 13px; /* labels / metadata        */
    --pub-text-caption: 12px; /* captions / tiny pills    */

    --pub-weight-regular: 400;
    --pub-weight-medium: 500;
    --pub-weight-semi: 600;
    --pub-weight-bold: 700;
    /* — Spacing + radius — shared — */
    --pub-space-1: 4px;
    --pub-space-2: 8px;
    --pub-space-3: 12px;
    --pub-space-4: 16px;
    --pub-space-5: 20px;
    --pub-space-6: 24px;
    --pub-space-7: 32px;
    --pub-space-8: 40px;
    --pub-space-9: 56px;
    --pub-space-10: 72px;
    --pub-radius-sm: 6px;
    --pub-radius-md: 10px;
    --pub-radius-lg: 14px;
    --pub-radius-xl: 20px;
    --pub-radius-pill: 999px;
    /* — Universal — — — — — — — — — — — — */
    --pub-brand: #7e6fff;
    --pub-brand-soft: rgba(126, 111, 255, 0.12);
    --pub-brand-hover: #9080ff;
    --pub-success: #3dcb6c;
    --pub-success-soft: rgba(61, 203, 108, 0.14);
    --pub-warning: #ffb545;
    --pub-warning-soft: rgba(255, 181, 69, 0.14);
    --pub-danger: #ff5e7a;
    --pub-danger-soft: rgba(255, 94, 122, 0.14);
}


/* Dark theme tokens. Two selectors so the same values apply both:
        1) inside the .pub-root .pub-dark wrapper (PublicLayout uses this)
        2) anywhere with .pub-dark on its own (BrowseTournamentsPage uses
           the same wrapper, but this covers any future direct usage too) */
.pub-root.pub-dark,
.pub-dark {
    --pub-bg-page: #0f1119; /* outermost background - DARK BLACK          */
    /*--pub-bg-page: #1a1a27;*/ /* outermost background - soft BLACK          */
    --pub-bg-surface: #161825; /* card / panel                   */
    --pub-bg-raised: #1c1f2e; /* raised card, hovered surface   */
    --pub-bg-hover: #232638;
    --pub-bg-input: rgba(255, 255, 255, 0.04);
    --pub-text-primary: #ffffff; /* AAA contrast on bg-page        */
    --pub-text-body: #d8d8e0; /* primary body text (~12:1)      */
    --pub-text-secondary: #a8a8b8; /* secondary (~5.5:1)             */
    --pub-text-tertiary: #7a7a8a; /* hints — min AA on raised       */
    --pub-text-on-brand: #ffffff;
    --pub-border-subtle: rgba(255, 255, 255, 0.06);
    --pub-border-default: rgba(255, 255, 255, 0.10);
    --pub-border-strong: rgba(255, 255, 255, 0.18);
    --pub-shadow-card: 0 1px 0 rgba(255,255,255,0.02) inset;
    --pub-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.4);
}


    /* — LIGHT MODE PALETTE — — — — — — — — — — — — — — — — — — — — — — — — */

.pub-root.pub-light,
.pub-light {
    /*--pub-bg-page: #f7f7fb;*/
    --pub-bg-page: #eceef4; /* was #f7f7fb — cooler canvas */
    --pub-bg-surface: #ffffff;
    --pub-bg-raised: #ffffff;
    --pub-bg-hover: #f0f0f5;
    --pub-bg-input: #f3f3f8;
    --pub-text-primary: #0f1119;
    --pub-text-body: #2a2a35;
    --pub-text-secondary: #56566a;
    --pub-text-tertiary: #7a7a8a;
    --pub-text-on-brand: #ffffff;
    /*--pub-border-subtle: rgba(15, 17, 25, 0.06);*/
    --pub-border-subtle: rgba(15, 17, 25, 0.08); /* was 0.06 — gentle, dividers stay soft */
    --pub-border-default: rgba(15, 17, 25, 0.10);
    --pub-border-strong: rgba(15, 17, 25, 0.18);
    /*--pub-shadow-card: 0 1px 2px rgba(15, 17, 25, 0.04);*/
    --pub-shadow-card: 0 1px 2px rgba(15, 17, 25, 0.05), 0 1px 3px rgba(15, 17, 25, 0.08); /* was a near-invisible 0.04 single layer */
    /*--pub-shadow-hover: 0 8px 24px rgba(15, 17, 25, 0.10);*/
    --pub-shadow-hover: 0 6px 20px rgba(15, 17, 25, 0.12); /* was 0 8px 24px / 0.10 */
}

    /* Day-mode lift for per-tab cards that don't use .pub-card */
    .pub-light .pma-match,
    .pub-light .psc-match,
    .pub-light .pdr-group-card,
    .pub-light .psg-group,
    .pub-light .psg-podium-card {
        box-shadow: var(--pub-shadow-card);
    }

        .pub-light .pma-match:hover,
        .pub-light .psc-match:hover,
        .pub-light .pdr-group-card:hover,
        .pub-light .psg-group:hover,
        .pub-light .psg-podium-card:hover {
            box-shadow: var(--pub-shadow-hover);
        }

/* ═══════════════════════════════════════
   3. ROOT TYPOGRAPHY
   ═══════════════════════════════════════ */

.pub-root {
    font-family: var(--pub-font-sans);
    font-size: var(--pub-text-body);
    font-weight: var(--pub-weight-regular);
    line-height: 1.55;
    color: var(--pub-text-body);
    background: var(--pub-bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv11', 'ss01'; /* Inter stylistic tweaks */

    min-height: 100vh;
    transition: background 0.2s ease;
}

    .pub-root *,
    .pub-root *::before,
    .pub-root *::after {
        box-sizing: border-box;
    }


/* ═══════════════════════════════════════
   4. TYPE SCALE — UTILITY CLASSES
   ═══════════════════════════════════════
   Use these classes everywhere instead of one-off font-size declarations.
   Keeps every page using exactly the same scale.
   ═══════════════════════════════════════ */

.pub-display {
    font-size: var(--pub-text-display);
    font-weight: var(--pub-weight-semi);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--pub-text-primary);
    margin: 0;
}

.pub-h1 {
    font-size: var(--pub-text-h1);
    font-weight: var(--pub-weight-semi);
    line-height: 1.15;
    letter-spacing: -0.018em;
    color: var(--pub-text-primary);
    margin: 0;
}

.pub-h2 {
    font-size: var(--pub-text-h2);
    font-weight: var(--pub-weight-semi);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--pub-text-primary);
    margin: 0;
}

.pub-h3 {
    font-size: var(--pub-text-h3);
    font-weight: var(--pub-weight-semi);
    line-height: 1.3;
    color: var(--pub-text-primary);
    margin: 0;
}

.pub-body {
    font-size: var(--pub-text-body);
    font-weight: var(--pub-weight-regular);
    line-height: 1.55;
    color: var(--pub-text-body);
}

.pub-body-sm {
    font-size: var(--pub-text-body-sm);
    font-weight: var(--pub-weight-regular);
    line-height: 1.5;
    color: var(--pub-text-secondary);
}

.pub-label {
    font-size: var(--pub-text-label);
    font-weight: var(--pub-weight-medium);
    color: var(--pub-text-secondary);
}

.pub-caption {
    font-size: var(--pub-text-caption);
    font-weight: var(--pub-weight-medium);
    color: var(--pub-text-tertiary);
}

.pub-eyebrow {
    font-size: var(--pub-text-caption);
    font-weight: var(--pub-weight-semi);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pub-brand);
}

.pub-mono {
    font-family: var(--pub-font-mono);
    font-feature-settings: 'tnum', 'ss03';
}


/* ═══════════════════════════════════════
   5. REUSABLE COMPONENTS
   ═══════════════════════════════════════ */


/* — Buttons — — — — — — — — — — — — — — */

.pub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    font-family: inherit;
    font-size: var(--pub-text-body-sm);
    font-weight: var(--pub-weight-semi);
    letter-spacing: -0.005em;
    border: 1px solid transparent;
    border-radius: var(--pub-radius-md);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.08s;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}

    .pub-btn:active {
        transform: translateY(1px);
    }

.pub-btn--primary {
    background: var(--pub-brand);
    color: var(--pub-text-on-brand);
}

    .pub-btn--primary:hover {
        background: var(--pub-brand-hover);
    }

.pub-btn--success {
    background: var(--pub-success);
    color: #0a2010;
}

.pub-btn--ghost {
    background: transparent;
    color: var(--pub-text-primary);
    border-color: var(--pub-border-strong);
}

    .pub-btn--ghost:hover {
        background: var(--pub-bg-hover);
    }

.pub-btn--glass {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
}

    .pub-btn--glass:hover {
        background: rgba(255, 255, 255, 0.22);
    }

.pub-btn--sm {
    height: 36px;
    padding: 0 16px;
    font-size: var(--pub-text-caption);
}

.pub-btn--lg {
    height: 52px;
    padding: 0 28px;
    font-size: var(--pub-text-body);
}


/* — Pills / badges — — — — — — — — — — — */

.pub-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--pub-radius-pill);
    font-size: var(--pub-text-caption);
    font-weight: var(--pub-weight-medium);
    background: var(--pub-bg-input);
    color: var(--pub-text-secondary);
    border: 1px solid var(--pub-border-subtle);
    line-height: 1;
    white-space: nowrap;
}

.pub-pill--brand {
    background: var(--pub-brand-soft);
    color: var(--pub-brand);
    border-color: rgba(126, 111, 255, 0.25);
}

.pub-pill--success {
    background: var(--pub-success-soft);
    color: var(--pub-success);
    border-color: rgba(61, 203, 108, 0.28);
}

.pub-pill--warning {
    background: var(--pub-warning-soft);
    color: var(--pub-warning);
    border-color: rgba(255, 181, 69, 0.28);
}

.pub-pill--danger {
    background: var(--pub-danger-soft);
    color: var(--pub-danger);
    border-color: rgba(255, 94, 122, 0.28);
}

.pub-pill--live {
    background: var(--pub-success-soft);
    color: var(--pub-success);
    border-color: rgba(61, 203, 108, 0.28);
    font-weight: var(--pub-weight-semi);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 11px;
}

    .pub-pill--live::before {
        content: '';
        width: 7px;
        height: 7px;
        background: var(--pub-success);
        border-radius: 50%;
        box-shadow: 0 0 0 0 rgba(61, 203, 108, 0.6);
        animation: pub-pulse 2s infinite;
    }

@keyframes pub-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(61, 203, 108, 0.6);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(61, 203, 108, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(61, 203, 108, 0);
    }
}

.pub-pill--mono {
    font-family: var(--pub-font-mono);
    font-feature-settings: 'tnum';
}


/* — Cards — — — — — — — — — — — — — — — */

.pub-card {
    background: var(--pub-bg-surface);
    border: 1px solid var(--pub-border-subtle);
    border-radius: var(--pub-radius-lg);
    box-shadow: var(--pub-shadow-card);
    overflow: hidden;
    transition: transform 0.18s ease, border-color 0.18s, box-shadow 0.18s;
}

.pub-card--hover:hover {
    transform: translateY(-2px);
    border-color: var(--pub-border-default);
    box-shadow: var(--pub-shadow-hover);
}

.pub-card__body {
    padding: var(--pub-space-5);
}


/* — Stat tile — — — — — — — — — — — — — */

.pub-stat {
    background: var(--pub-bg-surface);
    border: 1px solid var(--pub-border-subtle);
    border-radius: var(--pub-radius-md);
    padding: var(--pub-space-4) var(--pub-space-5);
}

.pub-stat__label {
    font-size: var(--pub-text-caption);
    font-weight: var(--pub-weight-medium);
    color: var(--pub-text-secondary);
    margin-bottom: 6px;
}

.pub-stat__value {
    font-family: var(--pub-font-mono);
    font-feature-settings: 'tnum';
    font-size: 24px;
    font-weight: var(--pub-weight-semi);
    color: var(--pub-text-primary);
    line-height: 1.1;
}

.pub-stat__hint {
    font-size: var(--pub-text-caption);
    color: var(--pub-text-tertiary);
    margin-top: 4px;
}


/* — Section header — — — — — — — — — — — */

.pub-section-head {
    display: flex;
    align-items: center;
    gap: var(--pub-space-3);
    margin-bottom: var(--pub-space-5);
}

.pub-section-head__count {
    font-size: var(--pub-text-caption);
    font-weight: var(--pub-weight-medium);
    color: var(--pub-text-secondary);
    background: var(--pub-bg-input);
    padding: 3px 10px;
    border-radius: var(--pub-radius-pill);
}

.pub-section-head__link {
    margin-left: auto;
    color: var(--pub-brand);
    font-size: var(--pub-text-body-sm);
    font-weight: var(--pub-weight-medium);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .pub-section-head__link:hover {
        color: var(--pub-brand-hover);
    }


/* — Grid containers — — — — — — — — — — */

.pub-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--pub-space-7);
}

@media (max-width: 720px) {
    .pub-container {
        padding: 0 var(--pub-space-4);
    }

    .pub-display {
        font-size: 34px;
    }

    .pub-h1 {
        font-size: 22px;
    }
}


/* ═══════════════════════════════════════
   6. TOURNAMENT GRADIENT PALETTE
   ═══════════════════════════════════════
   8 hand-picked gradient pairs. Tournament cards pick one
   deterministically from TournamentIDNumber so the same
   tournament always shows the same colour — and adjacent
   cards (e.g. TR-001 + TR-002) always look different.

   Razor usage:
     <div class="pub-grad pub-grad--@(t.TournamentIDNumber % 8)">

   Each gradient is angled 135deg, dark→lighter, designed to
   keep white text fully legible at the bottom.
   ═══════════════════════════════════════ */

.pub-grad {
    background-size: cover;
    background-position: center;
}

.pub-grad--0 {
    background-image: linear-gradient(135deg, #3a2f8a 0%, #7e6fff 100%);
}
/* violet  */
.pub-grad--1 {
    background-image: linear-gradient(135deg, #1f4d3c 0%, #3dcb6c 100%);
}
/* emerald */
.pub-grad--2 {
    background-image: linear-gradient(135deg, #6b2444 0%, #ff5e8a 100%);
}
/* rose    */
.pub-grad--3 {
    background-image: linear-gradient(135deg, #1e3a5f 0%, #4a86ff 100%);
}
/* sky     */
.pub-grad--4 {
    background-image: linear-gradient(135deg, #5a3315 0%, #ffb545 100%);
}
/* amber   */
.pub-grad--5 {
    background-image: linear-gradient(135deg, #1f3d4d 0%, #38bdf8 100%);
}
/* cyan    */
.pub-grad--6 {
    background-image: linear-gradient(135deg, #4d1f4d 0%, #c084fc 100%);
}
/* purple  */
.pub-grad--7 {
    background-image: linear-gradient(135deg, #4d2f1f 0%, #f97316 100%);
}
/* orange  */


/* ═══════════════════════════════════════
   7. ACCESSIBILITY
   ═══════════════════════════════════════ */

.pub-root :focus-visible {
    outline: 2px solid var(--pub-brand);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .pub-root *,
    .pub-root *::before,
    .pub-root *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}


/* ════════════════════════════════════════════════════════════════════
   END OF FOUNDATION
   ════════════════════════════════════════════════════════════════════
   Anything page-specific (home / tournament / org) goes in the page's
   own scoped <style> block, NEVER in this file.
   ════════════════════════════════════════════════════════════════════ */