/* =============================================================
   Pokémon Journey · UI kit
   Mirrors the design tokens + primitives from "Landing Page
   Hi-Fi.html". Loaded globally; primitives are prefixed `pj-`
   so they coexist with Bootstrap + MudBlazor.
   ============================================================= */

:root {
    /* light (default) */
    --pj-paper:        #fafaf7;
    --pj-paper-2:      #f2efe8;
    --pj-paper-3:      #e5e1d6;
    --pj-ink:          #15171a;
    --pj-ink-2:        #4a5058;
    --pj-ink-3:        #8a8f96;
    --pj-rule:         rgba(21, 23, 26, 0.10);
    --pj-rule-2:       rgba(21, 23, 26, 0.18);
    --pj-rule-strong:  #15171a;
    --pj-accent:       #0e8a5a;
    --pj-accent-tint:  #e3f0e8;
    --pj-accent-deep:  #0a6b46;
    --pj-accent-ink:   #ffffff;
    --pj-shadow:       0 1px 0 rgba(21, 23, 26, 0.04),
                       0 8px 28px -16px rgba(21, 23, 26, 0.18);
    --pj-font-sans:    'Inter Tight', system-ui, -apple-system, "Segoe UI", sans-serif;
    --pj-font-mono:    'IBM Plex Mono', ui-monospace, monospace;
}

html[data-theme="dark"] {
    --pj-paper:        #0d0e10;
    --pj-paper-2:      #16181a;
    --pj-paper-3:      #1f2225;
    --pj-ink:          #f1efe8;
    --pj-ink-2:        #b8b5ad;
    --pj-ink-3:        #6d7178;
    --pj-rule:         rgba(241, 239, 232, 0.10);
    --pj-rule-2:       rgba(241, 239, 232, 0.20);
    --pj-rule-strong:  #f1efe8;
    --pj-accent:       #34c281;
    --pj-accent-tint:  rgba(52, 194, 129, 0.14);
    --pj-accent-deep:  #5cd99c;
    --pj-accent-ink:   #0b1410;
    --pj-shadow:       0 1px 0 rgba(0, 0, 0, 0.6),
                       0 12px 32px -16px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
}

/* `data-theme="auto"` defers to the OS. */
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --pj-paper:        #0d0e10;
        --pj-paper-2:      #16181a;
        --pj-paper-3:      #1f2225;
        --pj-ink:          #f1efe8;
        --pj-ink-2:        #b8b5ad;
        --pj-ink-3:        #6d7178;
        --pj-rule:         rgba(241, 239, 232, 0.10);
        --pj-rule-2:       rgba(241, 239, 232, 0.20);
        --pj-rule-strong:  #f1efe8;
        --pj-accent:       #34c281;
        --pj-accent-tint:  rgba(52, 194, 129, 0.14);
        --pj-accent-deep:  #5cd99c;
        --pj-accent-ink:   #0b1410;
        --pj-shadow:       0 1px 0 rgba(0, 0, 0, 0.6),
                           0 12px 32px -16px rgba(0, 0, 0, 0.6);
        color-scheme: dark;
    }
}

/* =============================================================
   Body — switch to the design's paper canvas + Inter Tight.
   ============================================================= */
html, body {
    background: var(--pj-paper);
    color: var(--pj-ink);
    font-family: var(--pj-font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* MudBlazor / Bootstrap both inject their own neutrals. Reroute the
   common variables to the design tokens so existing cards, dropdowns
   and form controls inherit the new palette without per-component
   rewrites. */
:root {
    --bs-body-bg: var(--pj-paper);
    --bs-body-color: var(--pj-ink);
    --bs-secondary-color: var(--pj-ink-2);
    --bs-tertiary-bg: var(--pj-paper-2);
    --bs-secondary-bg: var(--pj-paper-3);
    --bs-border-color: var(--pj-rule);
    --bs-border-color-translucent: var(--pj-rule);
}

/* Note: MudBlazor's --mud-elevation-N variables are set by the
   MudTheme.Shadows array in Components/MudProviders.razor — not here.
   MudThemeProvider injects a runtime <style> block that wins the
   cascade over any :root rule, so the source of truth has to be the
   theme itself. */

/* =============================================================
   MudPaper baseline — hairline rule so MudPaper containers match
   the row-card lists (.games-lane / .pt-card / .goal-card) that
   render the same way with plain divs. Without this, MudPapers
   would lift via shadow only and look noticeably "softer" than
   the bordered cards — the inconsistency the user flagged.
   ============================================================= */
.mud-paper {
    border: 1px solid var(--pj-rule);
}

/* =============================================================
   Type primitives
   ============================================================= */
.pj-mono {
    font-family: var(--pj-font-mono);
    letter-spacing: 0.06em;
}

.pj-eyebrow {
    font-family: var(--pj-font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pj-ink-3);
    font-weight: 500;
}

/* =============================================================
   Brand glyph — abstracted ball (circle, band, dot).
   ============================================================= */
.pj-glyph {
    width: 22px;
    height: 22px;
    flex: none;
    border: 1.75px solid var(--pj-ink);
    border-radius: 50%;
    position: relative;
    background: var(--pj-paper);
    display: inline-block;
}

.pj-glyph::before {
    content: '';
    position: absolute;
    left: -1.75px;
    right: -1.75px;
    top: 50%;
    height: 1.75px;
    transform: translateY(-50%);
    background: var(--pj-ink);
}

.pj-glyph::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    transform: translate(-50%, -50%);
    border: 1.75px solid var(--pj-ink);
    border-radius: 50%;
    background: var(--pj-paper);
}

.pj-glyph.lg {
    width: 34px;
    height: 34px;
}

.pj-glyph.lg::after {
    width: 9px;
    height: 9px;
}

.pj-wordmark {
    font-family: var(--pj-font-sans);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.005em;
    color: var(--pj-ink);
}

/* =============================================================
   Buttons — `.pj-btn` (+ primary | secondary | ghost; lg | sm)
   ============================================================= */
.pj-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    padding: 11px 16px;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background 120ms ease,
                border-color 120ms ease,
                color 120ms ease,
                transform 120ms ease;
}

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

.pj-btn-primary {
    background: var(--pj-accent);
    color: var(--pj-accent-ink);
    border-color: var(--pj-accent);
}

.pj-btn-primary:hover,
.pj-btn-primary:focus-visible {
    background: var(--pj-accent-deep);
    border-color: var(--pj-accent-deep);
    color: var(--pj-accent-ink);
    text-decoration: none;
}

.pj-btn-secondary {
    background: transparent;
    color: var(--pj-ink);
    border-color: var(--pj-rule-2);
}

.pj-btn-secondary:hover,
.pj-btn-secondary:focus-visible {
    border-color: var(--pj-ink);
    background: var(--pj-paper-2);
    color: var(--pj-ink);
    text-decoration: none;
}

.pj-btn-ghost {
    background: transparent;
    color: var(--pj-ink-2);
    padding: 11px 12px;
}

.pj-btn-ghost:hover,
.pj-btn-ghost:focus-visible {
    color: var(--pj-ink);
    background: var(--pj-paper-2);
    text-decoration: none;
}

.pj-btn-lg { font-size: 15px; padding: 14px 22px; }
.pj-btn-sm { font-size: 13px; padding: 8px 12px; }

.pj-btn .pj-arrow {
    display: inline-block;
    transition: transform 160ms ease;
}

.pj-btn:hover .pj-arrow { transform: translateX(3px); }

/* =============================================================
   Chips
   ============================================================= */
.pj-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--pj-font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pj-ink-2);
    background: var(--pj-paper-2);
    border: 1px solid var(--pj-rule);
    padding: 4px 8px;
    border-radius: 4px;
}

.pj-chip.accent {
    color: var(--pj-accent-deep);
    background: var(--pj-accent-tint);
    border-color: transparent;
}

/* =============================================================
   Card — paper-2 panel with a hairline rule.
   ============================================================= */
.pj-card {
    background: var(--pj-paper-2);
    border: 1px solid var(--pj-rule);
    border-radius: 8px;
    padding: 22px;
}

/* =============================================================
   Input — focus uses accent ring at 3px, accent-tint glow.
   ============================================================= */
.pj-input {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--pj-rule-2);
    background: var(--pj-paper);
    padding: 10px 12px;
    border-radius: 6px;
    min-width: 220px;
    font-size: 14px;
    color: var(--pj-ink);
    font-family: inherit;
}

.pj-input::placeholder { color: var(--pj-ink-3); }

.pj-input:focus-visible,
.pj-input.focus {
    outline: none;
    border-color: var(--pj-accent);
    box-shadow: 0 0 0 3px var(--pj-accent-tint);
}

/* =============================================================
   Section-tag / ledger helpers (used by the landing + Me hub).
   ============================================================= */
.pj-section-tag {
    font-family: var(--pj-font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pj-accent-deep);
}

.pj-rule-h {
    height: 1px;
    background: var(--pj-rule);
    border: 0;
}