/* The app's colours, defined once. Linked first in both hosts' index.html (before the splash and
   the theme stylesheets) so everything that paints early uses the right ones.
   ThemeProvider.RaDefaultMudTheme (Libs/Common/Settings) repeats these values for MudBlazor:
   change both together. [data-theme] is set on <html> by index.html's head script from the saved
   setting, else the system preference. Values follow Design v0.7 (coral accent, light grey page
   with white cards; near-black page with slate cards in dark mode). */
:root {
    /* The brand colour: loading screen, MAUI native splash, logo background. */
    --ra-brand: #E73155;
    /* The accent: fills, marks, progress, icons, the active tab. As small text it is --ra-primary-ink, and white text sits on
       --ra-primary-deep (about 3:1 either way on the plain accent). */
    --ra-primary: #F54E5E;
    /* The bar carries white text, so it is the deep accent. */
    --ra-appbar: #C63F4C;
    --ra-appbar-text: #FFFFFF;
    --ra-bg: #F4F4F6;
    --ra-surface: #FFFFFF;
    /* The accent deepened only as far as small text needs (AccentPalette.DeepFor): white text on it, and it as text on the
       light page, are both 4.5:1 or more. These are the default coral's; a chosen accent's is stored with it and set by
       index.html's head script. Under Home's white label text in both modes. */
    --ra-primary-deep: #C63F4C;
    /* The accent as small text: the deep accent on light surfaces (the accent itself is about 3:1 there); in dark mode the
       accent, which is lightened until it reads at 4.5:1 on the slate card (AccentPalette, tested). */
    --ra-primary-ink: var(--ra-primary-deep);
    /* A verse number's numeral: small (0.65 em) and on its chip's 14% accent tint, which takes the deep accent to about
       3.8:1, so in light mode it is the deep accent darkened further (about 5.8:1 on the tint). */
    --ra-verse-ink: color-mix(in srgb, var(--ra-primary-deep) 82%, #000);
    /* Fixed, whatever the accent: Home's Today card (its gold quote and glow, and the dark end of its gradient), which is
       the same in light and dark mode. */
    --ra-morning-gold: #F6D331;
    --ra-night-chrome: #1B1B1F;
}

:root[data-theme="dark"] {
    --ra-primary: #F57E8C;
    --ra-appbar: #1B1B1F;
    --ra-appbar-text: rgba(255, 255, 255, 0.87);
    --ra-bg: #131313;
    --ra-surface: #343944;
    /* The light coral's deep form: the lightened dark coral would deepen to a dull rose. */
    --ra-primary-deep: #C63F4C;
    --ra-primary-ink: var(--ra-primary);
    /* On the dark page the tinted chip stays dark, and the accent itself reads on it (about 5.5:1). */
    --ra-verse-ink: var(--ra-primary);
}

html {
    background-color: var(--ra-bg);
}

/* Chrome sizes, used by the app shell (MainLayout.razor.css) to slide bars out of the grid. */
:root {
    --app-header-height: 48px;
    --app-footer-height: 56px;
}