/* GPClarity design tokens — single source of truth for breakpoints,
   shell sizes, and the brand indigo palette.

   Loaded first in App.razor (before site.css) so every other sheet —
   shared, layouts, pages — resolves these variables without depending
   on import order. The tokens themselves are :root scoped so any
   element in the document can consume them.

   ── Breakpoints ─────────────────────────────────────────────────
   Custom properties cannot be referenced inside @media queries (the
   CSS spec forbids it), so the literal pixel values are repeated in
   @media rules across the codebase. The variable values below are
   the canonical source — when the codebase needs a new breakpoint,
   update both this file and any @media rules that reference it.

   Aligned with MudBlazor's default breakpoint scale so MudGrid /
   Hidden / Breakpoint props and our custom CSS land on the same
   bucket boundaries:

      xs   ≤ 599px   phone
      sm   600-959   large phone / small tablet
      md   960-1279  tablet / small laptop  (portal banner shows here)
      lg   1280-1439 laptop                 (portal banner hidden, layout still locked at 1400px)
      xl   1440-1919 desktop                (comfortable portal width)
      xxl  ≥ 1920    original design target (1920×1080 anchor)

   ── Logged-in portal layout contract (locked desktop) ─────────
   The logged-in portal (LoggedInLayout) is treated as a desktop
   application, not a fluid layout. Below the banner threshold a
   soft "unusually small window" banner appears; the layout itself
   stays locked to the content min-width so the page scrolls
   horizontally instead of squishing/reflowing. See the responsive
   UI pass plan for the architectural rationale.

   --gpc-portal-min-content      hard min-width on .logged-in-main
                                 and the .gpc-page-container shell;
                                 below this width the page scrolls
                                 horizontally rather than reflowing.

   --gpc-portal-banner-threshold viewport width below which the
                                 ViewportGate banner renders. Tune
                                 independently of the layout lock —
                                 e.g. raise to 1440px to nag a wider
                                 audience without changing the layout.

   ── Shell gutters ──────────────────────────────────────────────
   Standard horizontal padding for .gpc-page-container at each
   breakpoint band. page-shell.css consumes these for its container.

   ── Brand palette ──────────────────────────────────────────────
   Indigo #3B3F7A is the primary accent across the auth flows
   (login/signup/welcome/password-reset), trial banners, support
   FAQ accents, account-settings, and adapter dialogs. Previously
   each of those sheets defined a local `--{prefix}-indigo` block
   with the same hex literal — those local vars now resolve to
   var(--gpc-indigo) and friends, so the hex appears once here
   instead of nine times across the codebase. Per-page overrides
   are still possible by replacing the local var definition; the
   global tokens stay untouched.

   Two soft tints exist because auth cards use rgba(…, 0.08) and
   trial banners use rgba(…, 0.10). Both are exposed here so any
   sheet can pick the variant it needs without redefining either. */

:root {
    /* ── Breakpoints (px values; not directly usable in @media) ── */
    --gpc-bp-xs: 600px;
    --gpc-bp-sm: 960px;
    --gpc-bp-md: 1280px;
    --gpc-bp-lg: 1440px;
    --gpc-bp-xl: 1920px;

    /* ── Logged-in portal layout lock ── */
    --gpc-portal-min-content: 1400px;
    --gpc-portal-banner-threshold: 1280px;

    /* ── Shell gutters ── */
    --gpc-shell-gutter-desktop: 44px;
    --gpc-shell-gutter-tablet: 24px;
    --gpc-shell-gutter-phone: 16px;

    /* ── Brand palette ── */
    --gpc-indigo: #3B3F7A;
    --gpc-indigo-soft: rgba(59, 63, 122, 0.08);
    --gpc-indigo-soft-strong: rgba(59, 63, 122, 0.10);
    --gpc-indigo-line: rgba(59, 63, 122, 0.22);
    --gpc-text: #2c2f4a;
    --gpc-text-muted: #65687d;
}