/* ===========================================================================
   Smalltalk Ninja — design tokens.

   The single source of truth for the visual language. Everything else
   (site.css, auth.css, the per-page <style> blocks, and the MudBlazor theme in
   Theme/StnTheme.cs) reads from here rather than holding its own copy of a
   colour or a radius.

   Loaded by BOTH worlds, and it has to be:
     - Pages/_Layout.cshtml  → the Blazor app (before site.css)
     - Pages/Account/*.cshtml and Pages/Error.cshtml → raw Razor Pages, which
       run outside Blazor and so never see MudBlazor's variables.

   Note on the C# side: MudBlazor's palette wants literal colour values, not
   var() references, so the brand hexes below are mirrored in StnTheme.cs.
   Those two lists are the one duplication in the system — change both.
   =========================================================================== */

:root {
    /* ---- Brand ------------------------------------------------------------
       Two stops of blue and two of purple. The app previously drifted between
       #42a5f5 and #64b5f6 for "the" brand blue; both survive here, but with
       distinct jobs rather than by accident:
         --stn-blue        solid fills, the MudBlazor primary, icon accents
         --stn-blue-bright the lighter stop, for gradient TEXT on dark, where
                           #42a5f5 is too dim to read once clipped
       Same split for purple: --stn-purple fills, --stn-purple-bright for text.
       ------------------------------------------------------------------- */
    --stn-blue: #42a5f5;
    --stn-blue-bright: #64b5f6;
    --stn-blue-pale: #8ecbff;
    --stn-blue-deep: #1e88e5;

    --stn-violet: #7e57c2;
    --stn-purple: #ab47bc;
    --stn-purple-bright: #d18bf0;

    /* Brand colours as bare RGB triples, for rgba() washes at arbitrary alpha.
       CSS has no way to take an existing hex and vary its alpha without this. */
    --stn-blue-rgb: 66, 165, 245;
    --stn-violet-rgb: 126, 87, 194;
    --stn-purple-rgb: 171, 71, 188;

    /* ---- Canonical gradients ---------------------------------------------
       Two, with separate jobs. Using the wrong one is the drift that this
       file exists to stop.
         --stn-grad-brand  filled surfaces: CTA pills, badges, accent bars
         --stn-grad-text   background-clip:text headings and accents
       ------------------------------------------------------------------- */
    --stn-grad-brand: linear-gradient(135deg, var(--stn-blue) 0%, var(--stn-violet) 55%, var(--stn-purple) 100%);
    --stn-grad-text: linear-gradient(135deg, var(--stn-blue-bright) 0%, var(--stn-purple) 100%);
    --stn-grad-text-soft: linear-gradient(135deg, var(--stn-blue-pale) 0%, var(--stn-purple-bright) 100%);

    /* A hairline that fades out — used under page headers and the chat peer
       header so a section break reads as brand rather than as a grey rule. */
    --stn-grad-hairline: linear-gradient(90deg,
        rgba(var(--stn-blue-rgb), 0.6),
        rgba(var(--stn-purple-rgb), 0.4),
        transparent 82%);

    /* ---- Brand washes ----------------------------------------------------
       Low-alpha radial gradients layered over a surface. The whole look of the
       app is these three intensities: hero (loud), appbar (medium), panel
       (barely there). Each is a background *layer list* missing its base
       colour, so callers append their own:
           background: var(--stn-wash-panel), var(--mud-palette-surface);
       ------------------------------------------------------------------- */
    --stn-wash-hero:
        radial-gradient(1200px 400px at 15% -10%, rgba(var(--stn-blue-rgb), 0.28), transparent 60%),
        radial-gradient(900px 500px at 110% 120%, rgba(var(--stn-purple-rgb), 0.22), transparent 55%);
    --stn-wash-appbar:
        radial-gradient(600px 220px at 0% 0%, rgba(var(--stn-blue-rgb), 0.28), transparent 62%),
        radial-gradient(520px 240px at 100% 130%, rgba(var(--stn-purple-rgb), 0.26), transparent 58%);
    --stn-wash-panel:
        radial-gradient(700px 320px at 8% -8%, rgba(var(--stn-blue-rgb), 0.10), transparent 60%),
        radial-gradient(640px 340px at 112% 112%, rgba(var(--stn-purple-rgb), 0.10), transparent 55%);
    --stn-wash-empty:
        radial-gradient(620px 300px at 50% -8%, rgba(var(--stn-blue-rgb), 0.12), transparent 60%),
        radial-gradient(520px 280px at 92% 112%, rgba(var(--stn-purple-rgb), 0.12), transparent 55%);

    /* The dark base the hero wash sits on. */
    --stn-grad-hero-base: linear-gradient(160deg, #20202c 0%, #171720 100%);

    /* ---- Surface ramp (dark) ---------------------------------------------
       Darkest to lightest. These were previously five slightly different
       near-blacks scattered across auth.css, site.css and Index.razor; this is
       the reconciled ramp. Mirrored into the MudBlazor palette.
       ------------------------------------------------------------------- */
    --stn-ink: #16161f;         /* deepest — code blocks, inset fields        */
    --stn-bg: #17171f;          /* page background                            */
    --stn-bg-raised: #1b1b26;   /* app bar                                    */
    --stn-surface: #262633;     /* cards, panels                              */
    --stn-surface-2: #2b2b38;   /* raised card on a card, dialogs             */

    /* ---- Lines & text ---------------------------------------------------- */
    --stn-hairline: rgba(255, 255, 255, 0.08);
    --stn-hairline-soft: rgba(255, 255, 255, 0.06);
    --stn-hairline-strong: rgba(255, 255, 255, 0.12);

    --stn-text: #ffffff;
    --stn-text-dim: rgba(255, 255, 255, 0.72);
    --stn-text-dimmer: rgba(255, 255, 255, 0.60);
    --stn-text-faint: rgba(255, 255, 255, 0.40);

    /* ---- Semantic --------------------------------------------------------
       Deliberately NOT brand-coloured: severity has to read as severity. Tuned
       for legibility on the dark ramp rather than taken from stock Material.  */
    --stn-danger: #f26c62;
    --stn-danger-bg: rgba(242, 108, 98, 0.12);
    --stn-warn: #ffb74d;
    --stn-warn-bg: rgba(255, 167, 38, 0.18);
    --stn-success: #81c784;
    --stn-success-bg: rgba(76, 175, 80, 0.18);

    /* ---- Overlays (scrims over content) ---------------------------------- */
    --stn-scrim: rgba(0, 0, 0, 0.42);
    --stn-scrim-strong: rgba(0, 0, 0, 0.60);
    --stn-scrim-full: rgba(0, 0, 0, 0.92);

    /* ---- Radius scale ----------------------------------------------------- */
    --stn-r-xs: 6px;
    --stn-r-sm: 8px;
    --stn-r-md: 12px;    /* matches MudBlazor DefaultBorderRadius in StnTheme */
    --stn-r-lg: 16px;
    --stn-r-xl: 20px;
    --stn-r-pill: 999px;

    /* ---- Spacing scale (4px base) ----------------------------------------- */
    --stn-s-1: 4px;
    --stn-s-2: 8px;
    --stn-s-3: 12px;
    --stn-s-4: 16px;
    --stn-s-5: 20px;
    --stn-s-6: 24px;
    --stn-s-8: 32px;
    --stn-s-10: 40px;
    --stn-s-12: 48px;

    /* ---- Elevation --------------------------------------------------------
       Two-layer shadows (a tight contact shadow plus a wide soft one) rather
       than one big blur — reads as depth instead of as a grey halo.          */
    --stn-e-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.22);
    --stn-e-2: 0 2px 4px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.28);
    --stn-e-3: 0 4px 8px rgba(0, 0, 0, 0.32), 0 8px 24px rgba(0, 0, 0, 0.40);
    --stn-e-4: 0 8px 16px rgba(0, 0, 0, 0.36), 0 16px 48px rgba(0, 0, 0, 0.50);

    /* Brand-coloured glows, for the primary CTA and other gradient surfaces. */
    --stn-glow-blue: 0 10px 30px rgba(var(--stn-blue-rgb), 0.45);
    --stn-glow-purple: 0 16px 40px rgba(var(--stn-purple-rgb), 0.60);
    --stn-glow-violet: 0 8px 22px rgba(var(--stn-violet-rgb), 0.42);

    /* ---- Motion -----------------------------------------------------------
       One easing curve everywhere — a decelerating "settle" that suits entrances
       and hover lifts alike. Already used ad hoc in Index/Chat; now shared.   */
    --stn-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --stn-dur-fast: 0.12s;
    --stn-dur: 0.15s;
    --stn-dur-slow: 0.45s;
    --stn-dur-entrance: 0.7s;

    /* ---- Typography -------------------------------------------------------
       One stack, replacing the previous three-way split (Helvetica Neue in
       site.css, Segoe UI in auth.css, Roboto from MudBlazor's default theme).

       system-ui first: that resolves to Segoe UI Variable on Windows 11, SF on
       Apple, Roboto on Android — a genuinely modern face on each platform with
       zero bytes downloaded and zero third-party requests, which the brand
       rule ("every asset self-hosted") requires.

       To move to a webfont later: self-host the woff2 under wwwroot/fonts, add
       an @font-face here, and prepend the family below. Nothing else changes.
       ------------------------------------------------------------------- */
    --stn-font-sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    --stn-font-mono: "Cascadia Code", "JetBrains Mono", Consolas, "SF Mono",
        ui-monospace, monospace;

    /* Uppercase micro-label tracking (the "kicker" look). */
    --stn-track-kicker: 0.18em;
    --stn-track-label: 0.04em;

    /* ---- Layout ----------------------------------------------------------- */
    --stn-page-max: 1040px;   /* landing + wide interior pages */
    --stn-read-max: 760px;    /* prose / legal pages: comfortable measure */
    --stn-form-max: 640px;    /* single-column forms (redeem, codes) */
}

/* Respect the OS "reduce motion" setting globally by collapsing the duration
   tokens. Any rule that animates via these picks it up for free; rules with
   hardcoded durations still need their own media query. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --stn-dur-fast: 0.01ms;
        --stn-dur: 0.01ms;
        --stn-dur-slow: 0.01ms;
        --stn-dur-entrance: 0.01ms;
    }
}