/* ============================================================
   Fluent UI Blazor, wearing the TechXYZ design system.

   Loaded AFTER Fluent's own stylesheet. Fluent's components are re-skinned here, never
   forked: the accent ramp is set at runtime by <FluentDesignTheme CustomColor="#0089CE" />
   — azure-600, the one white text passes AA on — and everything Fluent derives from a token
   is redirected at that token rather than overridden per component.
   ============================================================ */

:root {
    /* Montserrat instead of Segoe UI, everywhere Fluent asks for a font. */
    --body-font: var(--font-sans);
    --font-family: var(--font-sans);

    /* Fluent takes these unitless, in pixels. 10px controls, 14px layers — the TechXYZ
       --radius-md and --radius-lg, which cannot be handed over as var() for that reason. */
    --control-corner-radius: 10;
    --layer-corner-radius: 14;

    /* Surfaces read cool slate, not Fluent's default warm grey. */
    --neutral-layer-1: var(--surface-page);
    --neutral-layer-card-container: var(--surface-card);
    --neutral-fill-layer-rest: var(--surface-card);
    --neutral-fill-stealth-rest: transparent;
    --neutral-fill-input-rest: var(--surface-card);
    --neutral-stroke-rest: var(--border-subtle);
    --neutral-stroke-divider-rest: var(--border-subtle);
    --neutral-foreground-rest: var(--text-body);
    --neutral-foreground-hint: var(--text-muted);

    /* The focus ring is the one thing that may not be negotiated away: RGAA. */
    --focus-stroke-outer: var(--azure-500);
    --focus-stroke-width: 2;

    /* 44px default control height, 26px switches — the design system's --control-md. */
    --base-height-multiplier: 11;
    --design-unit: 4;
}

/* ---- Buttons -----------------------------------------------------------
   The design system's Button: 44px tall, radius 10, semibold, and the azure glow on the
   primary action. Fluent's accent button is the primary; outline and stealth follow. */

/* The host element sizes itself independently of its shadow part: styling only ::part(control)
   left a 44px control inside a 32px button. Both, or neither. */
fluent-button {
    height: var(--control-md);
}

fluent-button.mx-btn-sm {
    height: 38px;
}

fluent-button::part(control) {
    height: var(--control-md);
    padding: 0 20px;
    font-family: var(--font-sans);
    font-weight: var(--weight-semibold);
    font-size: var(--text-md);
    letter-spacing: 0.01em;
    border-radius: var(--radius-md);
    transition:
        transform var(--duration-fast) var(--ease-standard),
        background var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
}

fluent-button[appearance='accent']::part(control) {
    background: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: var(--shadow-brand);
}

fluent-button[appearance='accent']:hover::part(control) {
    background: var(--color-primary-hover);
}

fluent-button[appearance='outline']::part(control) {
    background: var(--surface-card);
    color: var(--text-strong);
    border: 1.5px solid var(--border-default);
    box-shadow: var(--shadow-xs);
}

/* Pressed, on every variant. The design system presses rather than dims. */
fluent-button:active::part(control) {
    transform: scale(0.98);
}

/* The `sm` size the mockups use for in-panel actions. */
fluent-button.mx-btn-sm::part(control) {
    height: 38px;
    padding: 0 14px;
    font-size: var(--text-sm);
}

/* ---- Text fields and search -------------------------------------------- */

fluent-text-field::part(root),
fluent-search::part(root) {
    height: var(--control-md);
    background: var(--surface-card);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-md);
    transition:
        border-color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
}

fluent-text-field::part(control),
fluent-search::part(control) {
    padding: 0 14px;
    font-family: var(--font-sans);
    font-size: var(--text-md);
    color: var(--text-strong);
}

fluent-text-field:hover::part(root),
fluent-search:hover::part(root) {
    border-color: var(--border-strong);
}

fluent-text-field:focus-within::part(root),
fluent-search:focus-within::part(root) {
    border-color: var(--border-focus);
    box-shadow: var(--ring-brand);
}

/* ---- Motion ------------------------------------------------------------
   Honour the operating system's setting. Transitions are decoration; the console has to be
   usable without them. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}