/* ─────────────────────────────────────────────────────────────────────────
   LivelyPass brand tokens
   Light mode is the default; dark mode follows the visitor's OS setting,
   and can be forced with <html data-theme="dark"> or data-theme="light".
   The Logo component reads --lp-pink / --lp-ink / --lp-muted, so it
   switches automatically (fish colors invert for contrast).
   ───────────────────────────────────────────────────────────────────────── */

:root {
    color-scheme: light;

    /* Brand */
    --lp-pink: #E0306F;        /* "Lively", fish half, accents */
    --lp-pink-hover: #C8245E;
    --lp-button: #C8245E;      /* primary button fill (white text passes AA: 5.4:1) */
    --lp-button-hover: #AE1D51;
    --lp-pink-text: #C2185B;   /* pink for small text on white (AA contrast) */
    --lp-ink: #1B1A22;         /* "Pass", other fish half, headings */
    --lp-muted: #55536A;       /* tagline, secondary text */

    /* Surfaces */
    --lp-bg: #FFFFFF;
    --lp-surface: #F4F2F7;     /* cards, app-icon tile */
    --lp-surface-2: #ECE9F2;
    --lp-line: #E3E0EA;

    /* Status */
    --lp-live: #15803D;        /* "live" / checked-in (AA on white) */
    --lp-warn: #B45309;        /* "only a few left" */
    --lp-danger: #DC2626;      /* cancelled, errors */

    --lp-on-pink: #FFFFFF;     /* text on pink buttons */
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --lp-pink: #FF4F8B;
        --lp-pink-hover: #FF6B9E;
        --lp-button: #FF4F8B;
        --lp-button-hover: #FF6B9E;
        --lp-pink-text: #FF6B9E;
        --lp-ink: #FFFFFF;
        --lp-muted: #B9BAD6;
        --lp-bg: #12101C;
        --lp-surface: #1D1A2E;
        --lp-surface-2: #26223A;
        --lp-line: #2C2748;
        --lp-live: #4ADE80;
        --lp-warn: #FFB547;
        --lp-danger: #F87171;
        --lp-on-pink: #12101C;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --lp-pink: #FF4F8B;
    --lp-pink-hover: #FF6B9E;
    --lp-button: #FF4F8B;
    --lp-button-hover: #FF6B9E;
    --lp-pink-text: #FF6B9E;
    --lp-ink: #FFFFFF;
    --lp-muted: #B9BAD6;
    --lp-bg: #12101C;
    --lp-surface: #1D1A2E;
    --lp-surface-2: #26223A;
    --lp-line: #2C2748;
    --lp-live: #4ADE80;
    --lp-warn: #FFB547;
    --lp-danger: #F87171;
    --lp-on-pink: #12101C;
}

/* Logo */
.lp-logo {
    display: block;
    width: auto;
    flex: none;
}

@keyframes lp-spin {
    to { transform: rotate(360deg); }
}

.lp-spin {
    transform-box: fill-box;
    transform-origin: center;
    animation: lp-spin 14s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .lp-spin { animation: none; }
}