/* ==============================================================================================
   Vesta Online — shell geometry, type and motion tokens, plus the sign-in interstitial.

   COLOUR IS NOT DEFINED HERE. Every colour comes from the generated token stylesheet the server
   serves at GET /api/theme/tokens.css, linked by Components/ThemeTokens.razor and generated from
   Vesta.Core.Theming (issue #891). This file holds only what B0 HANDOFF §5.4 lists as
   "theme-independent": sizes, radii, shadows, durations and fonts. Adding a colour literal to a
   painting line here fails CI (scripts/vesta-online/check-web-color-literals.sh).

   Deliberately separate from app.css, which is the ORIGINAL viewer's stylesheet and still carries
   109 colour literals awaiting issue #892. New work goes here or into a component's own scoped
   .razor.css, so it starts clean instead of inheriting that debt.
   ============================================================================================== */

:root {
    /* Shell geometry — B0 HANDOFF §3. The panel-modal positions itself against these rather than
       against the viewport, which is what makes it read as "on top of my work". */
    --titlebar-h: 44px;
    --rail-w: 76px;
    --rail-w-compact: 48px;
    --pane-w: 328px;
    --pane-w-narrow: 300px;
    --status-h: 24px;
    --banner-h: 34px;
    --tabs-h: 36px;
    --preset-h: 44px;
    --gap-panel: 8px;

    /* Project browser — HANDOFF §6. */
    --folder-tree-w: 232px;
    --details-pane-w: 316px;
    --project-row-h: 40px;

    /* Radii */
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 10px;
    --r-pill: 999px;

    /* Elevation. Values are alpha over a neutral, so they read correctly on light and dark
       themes alike; a custom-property definition is the one place a value legitimately appears. */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 18%);
    --shadow-md: 0 2px 8px rgb(0 0 0 / 22%);
    --shadow-lg: 0 8px 24px rgb(0 0 0 / 28%);
    --shadow-dialog: 0 16px 48px rgb(0 0 0 / 36%);

    /* Motion — HANDOFF §6: 120–260ms, no scale or bounce. */
    --dur: 180ms;
    --dur-fast: 120ms;
    --dur-slow: 260ms;
    --ease-standard: cubic-bezier(.2, 0, 0, 1);

    /* Type. Compact density, matching desktop (C0 D7). */
    --font-ui: "Segoe UI", "Segoe UI Variable", system-ui, -apple-system, sans-serif;
    --font-mono: "Cascadia Code", "Cascadia Mono", Consolas, "Courier New", monospace;
    --fs-dense: 12px;
    --fs-body: 13px;
    --fs-comfortable: 14px;
    --fs-heading: 16px;
    --fs-heading-lg: 22px;
    --fs-display: 40px;

    /* Minimum hit targets — HANDOFF §3. */
    --target-chrome: 28px;
    --target-dialog: 32px;
}

/* Icons-only rail below the graceful floor. There is no mobile layout in this program: below
   1024px the app shows a "use a desktop browser" notice instead (HANDOFF §3). */
@media (max-width: 1280px) {
    :root { --pane-w: var(--pane-w-narrow); }
}

@media (max-width: 1024px) {
    :root { --rail-w: var(--rail-w-compact); }
}

/* ---- Auth0 redirect interstitials (Pages/Authentication.razor) ------------------------------
   Not a component-scoped stylesheet because AuthenticationLayout and the page share it, and it is
   small. Landing palette, because these pages sit between the signed-out landing and the app. */

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--landing-surface);
    font-family: var(--font-ui);
}

.auth-interstitial {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 40px;
    border-radius: var(--r-lg);
    background: var(--landing-surface);
    color: var(--landing-body);
    font-size: var(--fs-comfortable);
    text-align: center;
}

.auth-interstitial__error {
    color: var(--landing-status-err);
    max-width: 44ch;
}

.auth-interstitial__link {
    color: var(--landing-link);
    font-size: var(--fs-body);
    text-decoration: none;
}

.auth-interstitial__link:hover,
.auth-interstitial__link:focus-visible {
    text-decoration: underline;
}

.auth-interstitial__link:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--r-sm);
}