@import '_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

/* Layout tokens only - colors come from FluentUI DesignTheme */
:root {
    --topbar-gradient: linear-gradient(0deg, var(--neutral-fill-layer-rest) 0%, var(--neutral-fill-rest) 100%);
    --brand-500: #3aac9e;
    --brand-600: #258d80;
    --surface-shadow: 0 0 2px rgba(17, 38, 44, 0.08), 0 6px 16px rgba(17, 38, 44, 0.08);
    --topBarBackground:  var(--neutral-fill-layer-rest);
}
header.header
{
    background-color: var(--topBarBackground) !important;
}
body {
    --body-font: "Segoe UI Variable", "Segoe UI", sans-serif;
    font-family: var(--body-font);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    margin: 0;
    /* Use FluentUI design tokens for theming */
    color: var(--neutral-foreground-rest);
    background: var(--neutral-fill-layer-rest);
}

/* Shell */
.app-shell {
    min-height: 100dvh;
    /* Background from FluentUI neutral-fill-layer-rest */
    background: var(--neutral-fill-layer-rest);
}


.muted {
    color: var(--neutral-foreground-hint);
}

/* Responsive */
@media (max-width: 980px) {}

@media (max-width: 700px) {}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(58, 172, 158, 0.45);
    outline-offset: 2px;
    border-radius: 8px;
}