/* ==========================================================================
   Material 3 Theme Overlay
   Maps --md-sys-* tokens onto --iata-* v3 tokens.
   Load AFTER iata-tokens.css. Makes @material/web components render in IATA brand.
   ========================================================================== */

:root {
    /* --- Primary (IATA Blue) --- */
    --md-sys-color-primary: var(--iata-blue-40);
    --md-sys-color-on-primary: var(--iata-blue-100);
    --md-sys-color-primary-container: var(--iata-blue-90);
    --md-sys-color-on-primary-container: var(--iata-blue-10);
    --md-sys-color-inverse-primary: var(--iata-blue-80);

    /* --- Secondary interaction states (IATA Blue, not Material default green) --- */
    --md-sys-color-secondary: var(--iata-blue-40);
    --md-sys-color-on-secondary: var(--iata-white);
    --md-sys-color-secondary-container: var(--iata-blue-95);
    --md-sys-color-on-secondary-container: var(--iata-blue-10);

    /* --- Tertiary (IATA Purple) --- */
    --md-sys-color-tertiary: #9d16ba;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #fed6ff;
    --md-sys-color-on-tertiary-container: #350041;

    /* --- Error (IATA Red) --- */
    --md-sys-color-error: #b91d10;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #ffdad4;
    --md-sys-color-on-error-container: #410100;

    /* --- Surface & Background --- */
    --md-sys-color-surface: var(--iata-grey-98);
    --md-sys-color-on-surface: var(--iata-grey-10);
    --md-sys-color-surface-variant: var(--iata-grey-95);
    --md-sys-color-on-surface-variant: var(--iata-grey-40);
    --md-sys-color-background: var(--iata-grey-98);
    --md-sys-color-on-background: var(--iata-grey-10);
    --md-sys-color-surface-container-lowest: var(--iata-grey-99);
    --md-sys-color-surface-container-low: var(--iata-white);
    --md-sys-color-surface-container: var(--iata-grey-98);
    --md-sys-color-surface-container-high: var(--iata-grey-95);
    --md-sys-color-surface-container-highest: var(--iata-grey-90);

    /* --- Inverse surface --- */
    --md-sys-color-inverse-surface: var(--iata-grey-20);
    --md-sys-color-inverse-on-surface: var(--iata-grey-95);

    /* --- Outline --- */
    --md-sys-color-outline: var(--iata-grey-60);
    --md-sys-color-outline-variant: var(--iata-grey-80);

    /* --- Shadow & scrim --- */
    --md-sys-color-shadow: rgba(0, 0, 0, 0.15);
    --md-sys-color-surface-tint: var(--iata-blue-40);
    --md-sys-color-scrim: rgba(0, 0, 0, 0.4);

    /* --- Shape (brand square, per ADR 004) --- */
    --md-sys-shape-corner-none: 0;
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full: var(--iata-radius-button);

    /* --- Typography refs --- */
    --md-ref-typeface-brand: var(--iata-txt-font-family);
    --md-ref-typeface-plain: var(--iata-txt-font-family);

    /* --- MD3 typescale (source of truth for typography, per ADR 003) --- */
    --md-sys-typescale-display-large: 400 3.5625rem/4rem var(--md-ref-typeface-brand);
    --md-sys-typescale-display-medium: 400 2.8125rem/3.25rem var(--md-ref-typeface-brand);
    --md-sys-typescale-display-small: 400 2.25rem/2.75rem var(--md-ref-typeface-brand);

    --md-sys-typescale-headline-large: 400 2rem/2.5rem var(--md-ref-typeface-brand);
    --md-sys-typescale-headline-medium: 400 1.75rem/2.25rem var(--md-ref-typeface-brand);
    --md-sys-typescale-headline-small: 400 1.5rem/2rem var(--md-ref-typeface-brand);

    --md-sys-typescale-title-large: 400 1.375rem/1.75rem var(--md-ref-typeface-brand);
    --md-sys-typescale-title-medium: 500 1rem/1.5rem var(--md-ref-typeface-brand);
    --md-sys-typescale-title-small: 500 0.875rem/1.25rem var(--md-ref-typeface-brand);

    --md-sys-typescale-body-large: 400 1rem/1.5rem var(--md-ref-typeface-brand);
    --md-sys-typescale-body-medium: 400 0.875rem/1.25rem var(--md-ref-typeface-brand);
    --md-sys-typescale-body-small: 400 0.75rem/1rem var(--md-ref-typeface-brand);

    --md-sys-typescale-label-large: 500 0.875rem/1.25rem var(--md-ref-typeface-brand);
    --md-sys-typescale-label-medium: 500 0.75rem/1rem var(--md-ref-typeface-brand);
    --md-sys-typescale-label-small: 500 0.6875rem/1rem var(--md-ref-typeface-brand);

    /* Override MD3 button rounding → brand square (ADR 004) */
    --md-filled-button-container-shape: var(--iata-radius-button);
    --md-outlined-button-container-shape: var(--iata-radius-button);
    --md-text-button-container-shape: var(--iata-radius-button);
    --md-elevated-button-container-shape: var(--iata-radius-button);
    --md-tonal-button-container-shape: var(--iata-radius-button);

    /* Switches keep their MD3 pill/circle shape. The brand-square override
       above remapped --md-sys-shape-corner-full to the button radius, which
       also flattened the switch track and handle (corner-full). Restore the
       fully-rounded toggle shape to match the design. */
    --md-switch-track-shape: 9999px;
    --md-switch-handle-shape: 9999px;
    --md-switch-state-layer-shape: 9999px;

    /* Outlined button border → Primary Blue (ARMIP-144) */
    --md-outlined-button-outline-color: var(--iata-primary);

    /* The ring every Material control draws: buttons, checkboxes, radios, icon
       buttons, switches. With only the colour set, the bundle's defaults ran
       the rest -- a 3px ring animating out to 8px (`active-width`), beside a
       field's flat 2px border. Pinning active-width to the same 2px removes the
       pulse. Shape is left alone: each component derives it from its own
       container shape, so the ring already follows the control's corners. */
    --md-focus-ring-color: var(--iata-focus-color);
    --md-focus-ring-width: var(--iata-focus-width);
    --md-focus-ring-active-width: var(--iata-focus-width);

    /* The same ring for the fields, which do not use `md-focus-ring` -- an
       outlined field paints focus by thickening its own outline. Global rather
       than under `.iata-form__field`, which is where it lived and why the 22
       templates that hand-roll their controls never picked it up. The rest of
       the field surface -- fill, resting outline, label colours -- stays
       page-level; this is the one property that has to hold app-wide. */
    --md-outlined-text-field-focus-outline-width: var(--iata-focus-width);
    --md-outlined-text-field-focus-outline-color: var(--iata-focus-color);
    --md-outlined-select-text-field-focus-outline-width: var(--iata-focus-width);
    --md-outlined-select-text-field-focus-outline-color: var(--iata-focus-color);

    /* A field in error stays red when it takes focus: focus says "you are
       here", the colour says "this is wrong", and blue would drop the second
       message at the moment the user arrives to fix it. Outline and label both.
       The brand's #F04632, not MD3's own #B91D10. */
    --md-outlined-text-field-error-focus-outline-color: var(--iata-error);
    --md-outlined-text-field-error-focus-label-text-color: var(--iata-error);
    --md-outlined-select-text-field-error-focus-outline-color: var(--iata-error);
    --md-outlined-select-text-field-error-focus-label-text-color: var(--iata-error);
    --md-filled-text-field-error-focus-active-indicator-color: var(--iata-error);
    --md-filled-text-field-error-focus-label-text-color: var(--iata-error);
    --md-filled-select-text-field-error-focus-active-indicator-color: var(--iata-error);
    --md-filled-select-text-field-error-focus-label-text-color: var(--iata-error);
}

/* Those tokens only reach what Material paints itself. The controls whose
   indicator we switch off -- `.iata-select--compact`, `.iata-field--flat`, the
   VCC textareas -- draw their own `outline` instead, so rebinding the token
   inside an errored control is what sends those red too, rather than a second
   `[error]` rule at each site. `error` is Material's own attribute. */
[error] {
    --iata-focus-color: var(--iata-error);
}

/* Outlined button ground → White (ARMIP-155 review).
 *
 * Figma fills the secondary button with `IATA/White` inside the blue outline
 * (node 1480:31298 and every other secondary in the 2026 set). Material gives
 * the outlined button no container-color token — its shadow-DOM container is
 * transparent by design — so on any page whose ground is not white (i.e. every
 * `.iata-page`, `--iata-background-01`) the grey showed through the button.
 *
 * The host element's own background is what paints there, so it is set here
 * rather than through a token. It needs the button radius as well, or the
 * square fill pokes out past the outline's rounded corners. On a white card
 * this is a no-op, which is why the mismatch survived so long. */
md-outlined-button {
    background: var(--iata-white);
    border-radius: var(--iata-radius-button);
}

/* A button sizes its slotted icon's *box* to 18px and clips it with
 * `overflow: hidden`, but `material-symbols.css` pins every `md-icon` to a 24px
 * glyph from the document stylesheet — which outranks both the button's
 * `::slotted` rule and `md-icon`'s own `:host`. So every trailing/leading button
 * icon in the app was drawing a 24px glyph cropped to 18px. Round shapes like
 * the eye (`visibility`) lose their outer edge, which is what the ARMIP-149
 * round-3 review flagged on "View Details".
 *
 * Both the token and the literal are set: `--md-icon-size` is the size the
 * component itself reads, and the explicit `font-size` is what actually beats
 * the 24px document rule. */
md-text-button md-icon[slot="icon"],
md-outlined-button md-icon[slot="icon"],
md-filled-button md-icon[slot="icon"],
md-filled-tonal-button md-icon[slot="icon"],
md-elevated-button md-icon[slot="icon"] {
    --md-icon-size: 18px;
    font-size: 18px;
}