/* EpicMoments — design tokens.
   ---------------------------------------------------------------------------
   The whole palette, scale and radius vocabulary of the public application, in
   one place. `app.css` may use these and must not invent values beside them.

   Deliberately NOT MudBlazor (docs/web/features/web-main-page.md §3): everything
   EpicMoments.Web.Client references is downloaded to the user's machine, and a
   full component library is a large payload to serve one card, one input and one
   button. MudBlazor stays EpicMoments.Admin's, whose visual language is an
   operator grid and nothing like this one.

   DARK ONLY, and that is a decision rather than an omission. The subject matter
   is video thumbnails from a game that is itself dark; a light theme is a second
   design to maintain for an audience that has not asked for it. There is
   therefore no `prefers-color-scheme` block anywhere in this file — `color-scheme`
   below tells the browser to paint its own furniture (scrollbars, form controls,
   the canvas behind the page) dark to match, which is what stops a white flash
   before the stylesheet applies. */

:root {
    color-scheme: dark;

    /* -- Surfaces ---------------------------------------------------------
       Near-black slate, never #000: pure black makes a 1px border invisible and
       leaves thumbnails floating with no edge. Each step is one level lighter,
       and depth comes from borders rather than shadows, which read badly on
       dark. */
    --bg: #0e1116;
    --surface: #151a22;
    --surface-raised: #1b212b;
    --border: #262f3d;
    --border-strong: #35415336;

    /* -- Text -------------------------------------------------------------
       Three weights of emphasis and no more. `--text-dimmer` is for metadata a
       reader skims past; anything a reader must act on uses `--text` or
       `--text-dim`. */
    --text: #e9edf3;
    --text-dim: #9aa5b4;
    --text-dimmer: #6b7686;

    /* -- Accent -----------------------------------------------------------
       Gold, and used sparingly — the primary button, the live dot, hover and
       focus. Deliberately not Twitch purple: a second streaming platform is a
       design goal, and borrowing one platform's colour makes the site look like
       its fan page. */
    --accent: #e3ab45;
    --accent-strong: #f0bc5e;
    --accent-dim: #8c6a2b;
    --on-accent: #1a1204;

    --danger: #e0655c;

    /* -- Spacing ----------------------------------------------------------
       A 4px base. `--space-2` (8px) is the minimum gap between two adjacent tap
       targets — see the 44px rule below. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* -- Radii ------------------------------------------------------------ */
    --radius-control: 12px;
    --radius-card: 16px;
    --radius-pill: 999px;

    /* -- Type -------------------------------------------------------------
       Two faces, maximum: every additional one is a render-blocking request on a
       phone. Space Grotesk carries the wordmark and headlines, Inter everything
       else. Both carry a real fallback stack rather than a bare `sans-serif`, so
       a blocked or slow font service degrades to something with similar metrics
       instead of to Times. */
    --font-display: "Space Grotesk", "SF Pro Display", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* 1rem = 16px, and --text-base never goes below it: 16px is both the
       readability floor at 390px and the threshold under which iOS Safari zooms
       the viewport when an input takes focus. */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;

    /* -- Layout -----------------------------------------------------------
       `--tap` is the hard floor for anything tappable, including icon-only
       buttons and the shard suffix. Spacing counts toward it; visual size need
       not (docs/web/features/web-main-page.md §6). */
    --tap: 44px;
    --appbar-height: 56px;
    --page-max: 72rem;
    --page-gutter: var(--space-4);

    --transition: 120ms ease;
}

/* Desktop (>=1024px) is the same page enlarged. No element exists only here. */
@media (min-width: 1024px) {
    :root {
        --page-gutter: var(--space-6);
        --text-3xl: 3rem;
    }
}