@font-face {
    font-family: "InterVariable";
    src: url("fonts/InterVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --ss-gradient: linear-gradient(135deg, #E23241, #FF9438, #FFDC44, #4DC16F, #1781AF, #8B1B8D);
    /*
        Same brand gradient, alpha baked into each color stop (not applied via the
        `opacity` CSS property) - used for the outer, more-faded rings of
        Message's GradientBorderFade style. Using `opacity` there would also fade
        everything nested inside that ring (the next ring in, and the message text),
        not just its own background.
    */
    --ss-gradient-45: linear-gradient(135deg, rgba(226,50,65,.45), rgba(255,148,56,.45), rgba(255,220,68,.45), rgba(77,193,111,.45), rgba(23,129,175,.45), rgba(139,27,141,.45));
    --ss-gradient-20: linear-gradient(135deg, rgba(226,50,65,.2), rgba(255,148,56,.2), rgba(255,220,68,.2), rgba(77,193,111,.2), rgba(23,129,175,.2), rgba(139,27,141,.2));
    --ss-gradient-15: linear-gradient(135deg, rgba(226,50,65,.15), rgba(255,148,56,.15), rgba(255,220,68,.15), rgba(77,193,111,.15), rgba(23,129,175,.15), rgba(139,27,141,.15));
}

.ss-gradient-text {
    background: var(--ss-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.ss-gradient-cta {
    background: var(--ss-gradient) !important;
    color: #fff !important;
}

.ss-gradient-cta .mud-icon-button-label {
    filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.85));
}

/* Pages that can never (Login.razor) or might not yet (before WASM boots) run JS to resolve
   "system" theme preference via MudThemeProvider.GetSystemDarkModeAsync(). These pages render
   with a dark best-guess (see PreferenceAwareLayoutBase), so this only needs to correct that
   guess for a light OS preference. Values below are MudBlazor's own generated output for
   SameSocialTheme's light palette (captured live, not hand-computed) - only variables that
   actually differ from the dark palette are listed; everything else is identical in both. Scoped
   to .ss-theme-system-fallback (not :root) so it never conflicts with MainLayout's own
   :root-scoped, JS-resolved palette elsewhere in the app. Only applied when the saved preference
   is "system" - an explicit light/dark choice always renders correctly server-side already. */
@media (prefers-color-scheme: light) {
    .ss-theme-system-fallback {
        --mud-palette-black: rgba(39,44,52,1);
        --mud-palette-primary: rgba(95,75,139,1);
        --mud-palette-primary-rgb: 95,75,139;
        --mud-palette-primary-text: rgba(255,255,255,1);
        --mud-palette-primary-darken: rgb(77,61,113);
        --mud-palette-primary-lighten: rgb(113,89,166);
        --mud-palette-primary-hover: rgba(95,75,139,0.058823529411764705);
        --mud-palette-dark: rgba(66,66,66,1);
        --mud-palette-dark-rgb: 66,66,66;
        --mud-palette-dark-darken: rgb(46,46,46);
        --mud-palette-dark-lighten: rgb(87,87,87);
        --mud-palette-dark-hover: rgba(66,66,66,0.058823529411764705);
        --mud-palette-text-primary: rgba(66,66,66,1);
        --mud-palette-text-primary-rgb: 66,66,66;
        --mud-palette-text-secondary: rgba(0,0,0,0.5372549019607843);
        --mud-palette-text-secondary-rgb: 0,0,0;
        --mud-palette-text-disabled: rgba(0,0,0,0.3764705882352941);
        --mud-palette-text-disabled-rgb: 0,0,0;
        --mud-palette-action-default: rgba(0,0,0,0.5372549019607843);
        --mud-palette-action-default-hover: rgba(0,0,0,0.058823529411764705);
        --mud-palette-action-disabled: rgba(0,0,0,0.25882352941176473);
        --mud-palette-action-disabled-background: rgba(0,0,0,0.11764705882352941);
        --mud-palette-surface: rgba(255,255,255,1);
        --mud-palette-surface-rgb: 255,255,255;
        --mud-palette-background: rgba(250,250,252,1);
        --mud-palette-background-gray: rgba(245,245,245,1);
        --mud-palette-drawer-background: rgba(255,255,255,1);
        --mud-palette-drawer-text: rgba(66,66,66,1);
        --mud-palette-drawer-icon: rgba(97,97,97,1);
        --mud-palette-appbar-background: rgba(89,74,226,1);
        --mud-palette-appbar-text: rgba(255,255,255,1);
        --mud-palette-lines-default: rgba(0,0,0,0.11764705882352941);
        --mud-palette-lines-inputs: rgba(189,189,189,1);
        --mud-palette-table-lines: rgba(224,224,224,1);
        --mud-palette-table-striped: rgba(0,0,0,0.0196078431372549);
        --mud-palette-divider: rgba(224,224,224,1);
        --mud-palette-divider-rgb: 224,224,224;
        --mud-palette-divider-light: rgba(0,0,0,0.8);
        --mud-palette-skeleton: rgba(0,0,0,0.10980392156862745);
        --mud-native-html-color-scheme: light;
    }

    /* CSS custom properties only cascade to descendants, and <body> is an ANCESTOR of
       .ss-theme-system-fallback (it wraps the whole page), so the override above never reaches
       MudBlazor's own "body { background-color: var(--mud-palette-background) }" rule. :has()
       lets body react to a descendant instead, without touching the shared --mud-palette-*
       variable name (avoiding any cascade-order fight with MudBlazor's own :root rule). */
    body:has(.ss-theme-system-fallback) {
        background-color: rgba(250,250,252,1);
    }
}