/*
 * The panel's own design tokens. Fluent UI's tokens (--color*, --spacing*, --borderRadius*, --fontSize*, ...) are
 * the source of truth; this file only names the few roles the panel needs that Fluent has no single token for.
 * Every value here is a Fluent token, so light and dark mode need no rules of their own; the text-size ramps are the
 * one exception.
 *
 * Rule for the rest of the panel: no literal colours, radii, shadows, font sizes or spacing lengths in .razor,
 * .razor.css or app.css — use a Fluent token or one of these. A surface or an intent takes the role named here, not
 * the Fluent token behind it, so changing a role reaches every screen. ThemingRulesTests enforces both.
 */

/* Until Fluent's script has applied its tokens, fall back to the system colours of the chosen scheme. */
body {
    background-color: var(--colorNeutralBackground1, Canvas);
    color: var(--colorNeutralForeground1, CanvasText);
}

/*
 * Declared again on every ThemeScope, which carries Fluent tokens of its own: a property built on another resolves
 * where it is declared, so the copy on :root would keep the page's theme inside a scope of the other one.
 */
:root,
.theme-scope {
    /*
     * Surfaces. The page sits on the canvas, and so does a quiet strip inside a card that reads as the page showing
     * through (a side list, a code block, an empty slot). Cards, dialogs and the header are raised above it. A well
     * or chip pressed into a surface (a table head, a key cap, a switch track) is sunken.
     */
    --app-surface-canvas: var(--colorNeutralBackground2);
    --app-surface-raised: var(--colorNeutralBackground1);
    --app-surface-sunken: var(--colorNeutralBackground3);

    /* Rhythm */
    --app-page-gutter: var(--spacingHorizontalXXL);
    --app-section-gap: var(--spacingVerticalXXL);
    --app-stack-gap: var(--spacingVerticalM);

    /* Intents: text, tinted background, border and a strong fill (text on it: --colorNeutralForegroundOnBrand). */
    --app-intent-success-fg: var(--colorStatusSuccessForeground1);
    --app-intent-success-bg: var(--colorStatusSuccessBackground1);
    --app-intent-success-border: var(--colorStatusSuccessBorder1);
    --app-intent-success-strong: var(--colorStatusSuccessBackground3);

    --app-intent-warning-fg: var(--colorStatusWarningForeground1);
    --app-intent-warning-bg: var(--colorStatusWarningBackground1);
    --app-intent-warning-border: var(--colorStatusWarningBorder1);
    --app-intent-warning-strong: var(--colorStatusWarningBackground3);

    --app-intent-danger-fg: var(--colorStatusDangerForeground1);
    --app-intent-danger-bg: var(--colorStatusDangerBackground1);
    --app-intent-danger-border: var(--colorStatusDangerBorder1);
    --app-intent-danger-strong: var(--colorStatusDangerBackground3);

    /* Fluent 2 has no "info" status family; the brand's tinted tokens play that role. */
    --app-intent-info-fg: var(--colorBrandForeground2);
    --app-intent-info-bg: var(--colorBrandBackground2);
    --app-intent-info-border: var(--colorBrandStroke2);
    --app-intent-info-strong: var(--colorBrandBackground);

    --app-intent-neutral-fg: var(--colorNeutralForeground3);
    --app-intent-neutral-bg: var(--colorNeutralBackground4);
    --app-intent-neutral-border: var(--colorNeutralStroke2);

    /* Chart series. Fluent tunes each palette's BorderActive shade for contrast in both modes. */
    --app-dataviz-1: var(--colorPaletteBlueBorderActive);
    --app-dataviz-2: var(--colorPaletteMarigoldBorderActive);
    --app-dataviz-3: var(--colorPaletteTealBorderActive);
    --app-dataviz-4: var(--colorPaletteBerryBorderActive);
    --app-dataviz-5: var(--colorPaletteLightGreenBorderActive);
    --app-dataviz-6: var(--colorPaletteDarkOrangeBorderActive);
    --app-dataviz-7: var(--colorPaletteLavenderBorderActive);
    --app-dataviz-8: var(--colorPaletteSteelBorderActive);
    --app-dataviz-positive: var(--colorStatusSuccessForeground1);
    --app-dataviz-negative: var(--colorStatusDangerForeground1);
}

/* A phone (768px and under, the width the shell's phone layout and Fluent's own mobile layout use) keeps more of its
   narrow screen for the page. */
@media (max-width: 768px) {
    :root,
    .theme-scope {
        --app-page-gutter: var(--spacingHorizontalL);
    }
}

/*
 * Text size, as picked in Settings: App.razor sets data-text-size on <html> from the appearance cookie, and Fluent
 * writes its type ramp as a plain html rule, which these outrank. Literal sizes because a ramp cannot be built from
 * Fluent's own steps on the element that redefines them; each keeps Fluent's steps a notch smaller or larger, and
 * Fluent's hero sizes as they are. Boxes sized in pixels around text (a button, a table row) keep their size.
 */
html[data-text-size="small"] {
    --fontSizeBase200: 11px;
    --fontSizeBase300: 13px;
    --fontSizeBase400: 15px;
    --fontSizeBase500: 18px;
    --fontSizeBase600: 22px;
    --lineHeightBase200: 15px;
    --lineHeightBase300: 18px;
    --lineHeightBase400: 20px;
    --lineHeightBase500: 24px;
    --lineHeightBase600: 28px;
}

html[data-text-size="large"] {
    --fontSizeBase100: 11px;
    --fontSizeBase200: 13px;
    --fontSizeBase300: 16px;
    --fontSizeBase400: 18px;
    --fontSizeBase500: 22px;
    --fontSizeBase600: 26px;
    --lineHeightBase100: 15px;
    --lineHeightBase200: 18px;
    --lineHeightBase300: 22px;
    --lineHeightBase400: 24px;
    --lineHeightBase500: 30px;
    --lineHeightBase600: 34px;
}

/*
 * Dark mode: the ramp Fluent derives from the InsurUp blue puts its text shades too dark — brand text, links and the
 * selected nav icon sit at 3.7:1 on the neutral surfaces and 2.8:1 on a hovered row, under WCAG AA's 4.5:1. Point
 * every brand *text* token at the ramp's lighter shades (6.3:1 at rest, 4.7:1 on hover). Strokes stay: they only
 * need 3:1, which they meet. Declared on body because Fluent puts its tokens on html; the --app-* aliases resolve on
 * :root, so the one built on a brand text token is repeated here.
 */
body[data-theme="dark"] {
    --colorBrandForeground1: var(--colorBrandForeground2Hover);
    --colorBrandForeground2: var(--colorBrandForeground2Hover);
    --colorBrandForegroundLink: var(--colorBrandForeground2Hover);
    --colorBrandForegroundLinkSelected: var(--colorBrandForeground2Hover);
    --colorBrandForegroundLinkHover: var(--colorBrandForeground2Pressed);
    --colorBrandForegroundLinkPressed: var(--colorBrandForeground2Pressed);
    --colorCompoundBrandForeground1: var(--colorBrandForeground2Hover);
    --colorCompoundBrandForeground1Hover: var(--colorBrandForeground2Pressed);
    --colorCompoundBrandForeground1Pressed: var(--colorBrandForeground2Pressed);
    --colorNeutralForeground2BrandSelected: var(--colorBrandForeground2Hover);
    --colorNeutralForeground2BrandHover: var(--colorBrandForeground2Hover);
    --colorNeutralForeground2BrandPressed: var(--colorBrandForeground2Pressed);
    --colorNeutralForeground3BrandSelected: var(--colorBrandForeground2Hover);
    --colorNeutralForeground3BrandHover: var(--colorBrandForeground2Hover);
    --colorNeutralForeground3BrandPressed: var(--colorBrandForeground2Pressed);

    --app-intent-info-fg: var(--colorBrandForeground2Hover);
}