/* ─────────────────────────────────────────────────────────────────────────
   TicketBelle brand tokens (brand/README.md). Pink + ink, flat colours.
   Light mode is the default; the header button switches to dark (the site sets
   <html data-theme="light"> or "dark" before the page draws; the OS setting is not followed).
   The Logo component reads --lp-brand ("lively") and --lp-brand-2 ("pass"), so it
   switches automatically ("pass" is near-black on light, white on dark).
   ───────────────────────────────────────────────────────────────────────── */

:root {
    color-scheme: light;

    /* Brand */
    --lp-brand: #E0306F;        /* "lively", icon tile, accents (on white: logo, large text, decoration) */
    --lp-brand-2: #1B1A22;      /* "pass": ink */
    --lp-brand-hover: #C8245E;
    --lp-button: #C8245E;       /* primary button fill (white text passes AA: 5.4:1) */
    --lp-button-hover: #AE1D51;
    --lp-brand-text: #C2185B;   /* pink for small text and links (AA) */
    --lp-ink: #1B1A22;          /* headings, body text */
    --lp-muted: #55536A;        /* tagline, secondary text */

    /* Surfaces (a faint purple tint) */
    --lp-bg: #FFFFFF;
    --lp-surface: #F4F2F7;      /* cards */
    --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-brand: #FFFFFF;     /* text on pink buttons */
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --lp-brand: #FF4F8B;
        --lp-brand-2: #FFFFFF;
        --lp-brand-hover: #FF6B9E;
        --lp-button: #FF4F8B;
        --lp-button-hover: #FF6B9E;
        --lp-brand-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-brand: #12101C;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --lp-brand: #FF4F8B;
    --lp-brand-2: #FFFFFF;
    --lp-brand-hover: #FF6B9E;
    --lp-button: #FF4F8B;
    --lp-button-hover: #FF6B9E;
    --lp-brand-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-brand: #12101C;
}

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