/* Map Fluent UI Web Components tokens onto SteelAxis brand tokens.
   Load AFTER brand/tokens.css so var(--sa-*) resolves.
   FluentDesignTheme's CustomColor parameter sets the accent at runtime,
   so the --accent-* fallbacks here are mostly for the brief moment before
   the web component hydrates. */

:root {
    --accent-fill-rest:        var(--sa-orange);
    --accent-fill-hover:       var(--sa-orange);
    --accent-fill-active:      var(--sa-orange);
    --accent-foreground-rest:  var(--sa-navy);
    --neutral-foreground-rest: var(--sa-text);
    --neutral-stroke-rest:     var(--sa-border);
    --neutral-fill-rest:       var(--sa-bg-raised);
    --type-ramp-base-font-family: var(--sa-font-sans);
}

/* Force label / control-text visibility in case Fluent's shadow-DOM
   defaults override the design-system tokens. The `::part()` selectors
   pierce the shadow root for these specific exposed parts. */
fluent-text-field,
fluent-search,
fluent-text-area,
fluent-number-field,
fluent-select,
fluent-combobox,
fluent-checkbox,
fluent-switch,
fluent-radio,
fluent-radio-group {
    color: var(--sa-text);
}

fluent-text-field::part(label),
fluent-text-area::part(label),
fluent-number-field::part(label),
fluent-select::part(label),
fluent-combobox::part(label),
fluent-search::part(label) {
    color: var(--sa-text-strong);
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 4px;
}

/* The text input control inside FluentTextField. Force a readable
   surface that follows our brand bg-raised + border + text tokens. */
fluent-text-field::part(control),
fluent-text-area::part(control),
fluent-number-field::part(control),
fluent-search::part(control) {
    background: var(--sa-bg-raised);
    color: var(--sa-text);
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-md);
}

fluent-text-field::part(control):focus-visible,
fluent-text-area::part(control):focus-visible,
fluent-number-field::part(control):focus-visible,
fluent-search::part(control):focus-visible {
    border-color: var(--sa-orange);
    outline: 2px solid var(--sa-orange);
    outline-offset: 1px;
}

/* Checkbox label — child content slot, not a part. Style the host text color. */
fluent-checkbox {
    --foreground-on-accent-rest: var(--sa-accent-fg);
    color: var(--sa-text);
}