/* Chancenkarte's Fluent UI theme tokens, split out of app.css so a page can adopt Fluent's brand
   colors WITHOUT pulling in the rest of app.css.

   That distinction matters for the Points Calculator: it renders Fluent components inside
   PublicLayout, and app.css's first line imports Fluent's reboot.css, whose unlayered rules
   (h1-h6/p/ul margins, link colors, body font) would outrank Tailwind's layered Preflight and
   restyle the Tailwind-built header and footer around it. This file is just the custom-property
   declarations - no element selectors - so it can't disturb anything.

   app.css imports this too, so the dashboard and the calculator stay on one palette. */

:root {
    /* Chancenkarte brand palette: German-flag-informed, tuned for trust/authority rather than literal
       flag colors - deep federal navy carries the weight, gold is a sparing premium accent, red is
       reserved for status/alerts only. */
    --ck-navy: #0b2545;
    --ck-navy-dark: #071a33;
    --ck-navy-light: #13396b;
    --ck-gold: #ffcc00;
    --ck-gold-dark: #a8841c;
    --ck-red: #c8102e;
    --ck-surface: #ffffff;
    --ck-surface-alt: #f5f7fa;
    --ck-border: #e2e6ed;
    --ck-text: #1c2b3a;
    --ck-text-muted: #5b6b7c;
    /* Retint Fluent UI Blazor v5's design tokens (default Microsoft blue) to the Chancenkarte
       brand palette. This IS the officially supported v5 theming mechanism - Fluent v5 removed
       the old component-based FluentDesignTheme/FluentDesignSystemProvider entirely and its own
       migration docs say to override these exact --color* custom properties instead. They're
       consumed inside components' shadow DOM, which inherits :root custom properties -
       !important guards against a same-specificity JS-injected default theme stylesheet landing
       later in the cascade. */
    --colorBrandBackground: var(--ck-navy) !important;
    --colorBrandBackgroundHover: var(--ck-navy-light) !important;
    --colorBrandBackgroundPressed: var(--ck-navy-dark) !important;
    --colorBrandBackground2: var(--ck-navy) !important;
    --colorBrandBackground2Hover: var(--ck-navy-light) !important;
    --colorBrandBackground2Pressed: var(--ck-navy-dark) !important;
    --colorBrandForeground1: var(--ck-navy) !important;
    --colorBrandForeground2: var(--ck-navy-light) !important;
    --colorBrandForegroundLink: var(--ck-navy) !important;
    --colorBrandForegroundLinkHover: var(--ck-navy-light) !important;
    --colorBrandForegroundLinkPressed: var(--ck-navy-dark) !important;
    --colorBrandForegroundLinkSelected: var(--ck-navy-dark) !important;
    --colorBrandStroke1: var(--ck-navy) !important;
    --colorBrandStroke2: var(--ck-navy-light) !important;
    --colorCompoundBrandBackground: var(--ck-navy) !important;
    --colorCompoundBrandBackgroundHover: var(--ck-navy-light) !important;
    --colorCompoundBrandBackgroundPressed: var(--ck-navy-dark) !important;
    --colorCompoundBrandForeground1: var(--ck-navy) !important;
    --colorCompoundBrandForeground1Hover: var(--ck-navy-light) !important;
    --colorCompoundBrandForeground1Pressed: var(--ck-navy-dark) !important;
    --colorCompoundBrandStroke: var(--ck-navy) !important;
    --colorCompoundBrandStrokeHover: var(--ck-navy-light) !important;
    --colorCompoundBrandStrokePressed: var(--ck-navy-dark) !important;
    --colorNeutralForegroundOnBrand: #ffffff !important;
    --colorNeutralStrokeOnBrand: #ffffff !important;
}