/*
 * Bridge School brand colors for Fluent UI, in two layers.
 *
 * 1. The brand ramp: 16 shades, --brand-10 (darkest) to --brand-160 (lightest). --brand-80 is the
 *    brand color itself. These are the only color values in this file: changing the brand means
 *    changing the ramp (and its dark-mode overrides), never the tokens below.
 * 2. Fluent's brand tokens, each pointing at a shade, mapped exactly as Fluent's own light and dark
 *    themes map its stock ramp. Fluent writes its tokens on <html>; declaring them on <body> wins.
 *
 * The shades come from one rule, so a school's own color can be run through it:
 * - The ramp is shaped like Fluent's stock ramp but anchored so shade 80 is exactly the brand color.
 *   Shades 10 to 70 keep their lightness relative to the brand, so hover and pressed states go darker;
 *   shades 90 to 160 keep Fluent's lightness. The hue is the brand's (HCT 286 for #2317AA).
 * - In dark mode, shades used for text, links, and strokes are lightened until they reach 4.5:1 on
 *   #1F1F1F, #292929, and #333333 (Fluent's dark surfaces); those are the overrides below.
 * - In dark mode, filled brand surfaces (primary buttons) use that same accent shade, so buttons match
 *   headings and links. White fails on it, so their label is the darkest shade, --brand-10.
 *
 * Dark mode is the system setting, which is what Fluent follows. It is not Fluent's data-theme="dark"
 * on <body>: enhanced navigation resets <body>'s attributes to the server's, which have none, and
 * Fluent does not set it again, so the brand would turn back to its light shades on the next page.
 */

/* Layer 1: the brand ramp. */
body {
    --brand-10: #0A0A22;
    --brand-20: #101035;
    --brand-30: #141345;
    --brand-40: #181655;
    --brand-50: #1B186A;
    --brand-60: #1F1A7D;
    --brand-70: #201893;
    --brand-80: #2317AA;
    --brand-90: #7371FF;
    --brand-100: #8E8EFF;
    --brand-110: #9D9DFF;
    --brand-120: #AAAAFF;
    --brand-130: #BDBCFF;
    --brand-140: #D0CEFF;
    --brand-150: #E1DEFF;
    --brand-160: #F4F0FF;
}

@media (prefers-color-scheme: dark) {
    body {
        --brand-90: #8F8EFF;
        --brand-100: #908FFF;
    }
}

/* Layer 2: Fluent tokens, light mode. */
body {
    --colorNeutralForeground2BrandHover: var(--brand-80);
    --colorNeutralForeground2BrandPressed: var(--brand-70);
    --colorNeutralForeground2BrandSelected: var(--brand-80);
    --colorNeutralForeground3BrandHover: var(--brand-80);
    --colorNeutralForeground3BrandPressed: var(--brand-70);
    --colorNeutralForeground3BrandSelected: var(--brand-80);
    --colorBrandForegroundLink: var(--brand-70);
    --colorBrandForegroundLinkHover: var(--brand-60);
    --colorBrandForegroundLinkPressed: var(--brand-40);
    --colorBrandForegroundLinkSelected: var(--brand-70);
    --colorCompoundBrandForeground1: var(--brand-80);
    --colorCompoundBrandForeground1Hover: var(--brand-70);
    --colorCompoundBrandForeground1Pressed: var(--brand-60);
    --colorBrandForeground1: var(--brand-80);
    --colorBrandForeground2: var(--brand-70);
    --colorBrandForeground2Hover: var(--brand-60);
    --colorBrandForeground2Pressed: var(--brand-30);
    --colorBrandForegroundInverted: var(--brand-100);
    --colorBrandForegroundInvertedHover: var(--brand-110);
    --colorBrandForegroundInvertedPressed: var(--brand-100);
    --colorBrandForegroundOnLight: var(--brand-80);
    --colorBrandForegroundOnLightHover: var(--brand-70);
    --colorBrandForegroundOnLightPressed: var(--brand-50);
    --colorBrandForegroundOnLightSelected: var(--brand-60);
    --colorBrandBackground: var(--brand-80);
    --colorBrandBackgroundHover: var(--brand-70);
    --colorBrandBackgroundPressed: var(--brand-40);
    --colorBrandBackgroundSelected: var(--brand-60);
    --colorCompoundBrandBackground: var(--brand-80);
    --colorCompoundBrandBackgroundHover: var(--brand-70);
    --colorCompoundBrandBackgroundPressed: var(--brand-60);
    --colorBrandBackgroundStatic: var(--brand-80);
    --colorBrandBackground2: var(--brand-160);
    --colorBrandBackground2Hover: var(--brand-150);
    --colorBrandBackground2Pressed: var(--brand-130);
    --colorBrandBackground3Static: var(--brand-60);
    --colorBrandBackground4Static: var(--brand-40);
    --colorBrandBackgroundInvertedHover: var(--brand-160);
    --colorBrandBackgroundInvertedPressed: var(--brand-140);
    --colorBrandBackgroundInvertedSelected: var(--brand-150);
    --colorNeutralStrokeAccessibleSelected: var(--brand-80);
    --colorBrandStroke1: var(--brand-80);
    --colorBrandStroke2: var(--brand-140);
    --colorBrandStroke2Hover: var(--brand-120);
    --colorBrandStroke2Pressed: var(--brand-80);
    --colorBrandStroke2Contrast: var(--brand-140);
    --colorCompoundBrandStroke: var(--brand-80);
    --colorCompoundBrandStrokeHover: var(--brand-70);
    --colorCompoundBrandStrokePressed: var(--brand-60);
}

/* Layer 2: Fluent tokens, dark mode. Fluent uses different shades for the same roles in dark. */
@media (prefers-color-scheme: dark) {
    body {
        --colorNeutralForeground2BrandHover: var(--brand-100);
        --colorNeutralForeground2BrandPressed: var(--brand-90);
        --colorNeutralForeground2BrandSelected: var(--brand-100);
        --colorNeutralForeground3BrandHover: var(--brand-100);
        --colorNeutralForeground3BrandPressed: var(--brand-90);
        --colorNeutralForeground3BrandSelected: var(--brand-100);
        --colorBrandForegroundLink: var(--brand-100);
        --colorBrandForegroundLinkHover: var(--brand-110);
        --colorBrandForegroundLinkPressed: var(--brand-90);
        --colorBrandForegroundLinkSelected: var(--brand-100);
        --colorCompoundBrandForeground1: var(--brand-100);
        --colorCompoundBrandForeground1Hover: var(--brand-110);
        --colorCompoundBrandForeground1Pressed: var(--brand-90);
        --colorBrandForeground1: var(--brand-100);
        --colorBrandForeground2: var(--brand-110);
        --colorBrandForeground2Hover: var(--brand-130);
        --colorBrandForeground2Pressed: var(--brand-160);
        --colorBrandForegroundInverted: var(--brand-80);
        --colorBrandForegroundInvertedHover: var(--brand-70);
        --colorBrandForegroundInvertedPressed: var(--brand-60);
        --colorBrandForegroundOnLight: var(--brand-80);
        --colorBrandForegroundOnLightHover: var(--brand-70);
        --colorBrandForegroundOnLightPressed: var(--brand-50);
        --colorBrandForegroundOnLightSelected: var(--brand-60);
        --colorBrandBackground: var(--brand-100);
        --colorBrandBackgroundHover: var(--brand-110);
        --colorBrandBackgroundPressed: var(--brand-90);
        --colorBrandBackgroundSelected: var(--brand-90);
        --colorCompoundBrandBackground: var(--brand-100);
        --colorCompoundBrandBackgroundHover: var(--brand-110);
        --colorCompoundBrandBackgroundPressed: var(--brand-90);
        --colorBrandBackgroundStatic: var(--brand-100);
        --colorBrandBackground2: var(--brand-20);
        --colorBrandBackground2Hover: var(--brand-40);
        --colorBrandBackground2Pressed: var(--brand-10);
        --colorBrandBackground3Static: var(--brand-60);
        --colorBrandBackground4Static: var(--brand-40);
        --colorBrandBackgroundInvertedHover: var(--brand-160);
        --colorBrandBackgroundInvertedPressed: var(--brand-140);
        --colorBrandBackgroundInvertedSelected: var(--brand-150);
        --colorNeutralStrokeAccessibleSelected: var(--brand-100);
        --colorBrandStroke1: var(--brand-100);
        --colorBrandStroke2: var(--brand-50);
        --colorBrandStroke2Hover: var(--brand-50);
        --colorBrandStroke2Pressed: var(--brand-30);
        --colorBrandStroke2Contrast: var(--brand-50);
        --colorCompoundBrandStroke: var(--brand-100);
        --colorCompoundBrandStrokeHover: var(--brand-110);
        --colorCompoundBrandStrokePressed: var(--brand-90);
        --colorNeutralForegroundOnBrand: var(--brand-10);
    }
}