/* Global shell only. Component styling lives in .razor.css files next to each component,
   so anything that ends up here should be genuinely app-wide. */

:root {
    --tabule-surface: var(--gray-0);
    --tabule-surface-sunken: var(--gray-1);
    --tabule-ink: var(--gray-9);
    --tabule-ink-muted: var(--gray-6);
    --tabule-line: var(--gray-3);
    --tabule-accent: var(--indigo-6);

    /* Filled controls, paired with the ink that goes on them.
       The accent on its own is a brand colour and gets used for outlines, tints and focus rings,
       where it only has to be visible. A button filled with it and labelled in white is a
       different problem: indigo-6 against gray-0 measures 4.10, green-6 measures 2.24, red-6
       measures 3.12 — all under the 4.5 small text needs, and the green one was the state badge
       telling a guest they may now draw. These are the measured replacements, and they come in
       pairs so dark mode can flip which side is light rather than keep white text on a pale fill. */
    --tabule-accent-strong: var(--indigo-8);
    --tabule-on-accent: var(--gray-0);
    --tabule-live: var(--green-10);
    --tabule-on-live: var(--gray-0);
    --tabule-danger: var(--red-9);
    --tabule-on-danger: var(--gray-0);

    /* Warnings written as text rather than filled: orange-7 on white is 2.89. */
    --tabule-warn-ink: var(--orange-10);

    --tabule-chrome-radius: var(--radius-3);
    --tabule-chrome-shadow: var(--shadow-3);
}

@media (prefers-color-scheme: dark) {
    :root {
        --tabule-surface: var(--gray-9);
        --tabule-surface-sunken: var(--gray-10);
        --tabule-ink: var(--gray-1);
        --tabule-ink-muted: var(--gray-5);
        --tabule-line: var(--gray-7);
        --tabule-accent: var(--indigo-4);

        /* Flipped: a pale fill with dark ink. Keeping white text over indigo-4 would be 2.81,
           which is worse than the light-mode figure this whole set exists to fix. */
        --tabule-accent-strong: var(--indigo-4);
        --tabule-on-accent: var(--gray-9);
        --tabule-live: var(--green-4);
        --tabule-on-live: var(--gray-9);
        --tabule-danger: var(--red-4);
        --tabule-on-danger: var(--gray-9);
        --tabule-warn-ink: var(--orange-4);
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--tabule-surface);
    color: var(--tabule-ink);
    font-family: var(--font-system-ui);
    font-size: var(--font-size-1);
}

#app {
    height: 100%;
}

/* Boot placeholder, replaced the moment Blazor mounts. */
.boot {
    height: 100%;
    display: grid;
    place-content: center;
    gap: var(--size-3);
    justify-items: center;
}

.boot__mark {
    font-size: var(--font-size-4);
    font-weight: var(--font-weight-6);
    letter-spacing: var(--font-letterspacing-3);
    color: var(--tabule-ink-muted);
}

.boot__bar {
    width: 12rem;
    height: 3px;
    border-radius: var(--radius-round);
    background: var(--tabule-line);
    overflow: hidden;
}

.boot__bar span {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: inherit;
    background: var(--tabule-accent);
    animation: boot-slide 1.1s var(--ease-in-out-3) infinite;
}

@keyframes boot-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

#blazor-error-ui {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1000;
    padding: var(--size-3) var(--size-4);
    background: var(--yellow-2);
    color: var(--gray-9);
    box-shadow: var(--shadow-4);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: inline-end;
}