/* Metro by T-Mobile (metro) — new-locator visual parity with the legacy locator.
 *
 * Overrides the provider's :where(.locator-theme-root) token vars + the semantic type/spacing
 * fallbacks (see store_locator/frontend/styles/main.css KTD4). Values lifted from the legacy
 * sass/template_system/metro.scss. Loaded on both paths via store_locator.theming; on the widget
 * this file is cloned into the shadow root by lib/mount.ts (href under /locator_themes/).
 *
 * px only. Brand colors, square radii, and the white/grey→black action-button treatment come from
 * the DB LocatorTheme tokens (scripts/store_locator/metro_theme.py); this file adds only the
 * CSS-reachable type/spacing/icon deltas. @font-face is loaded by the Metro shell override; this
 * file only references the family. --locator-color-primary + --locator-font-family are also declared
 * here to satisfy the themed-file guard (store_locator/tests/test_theming.py).
 */
.locator-theme-root {
    /* Brand — metro.scss violet / DB color_primary (scripts/store_locator/metro_theme.py). */
    --locator-color-primary: #330c48;
    --locator-color-secondary: #6e2f99;
    --locator-color-muted: #6a6a6a;
    --locator-color-tertiary: #262626;

    /* Body font: the ParagraphFont brand face used by legacy Metro (metro.scss). The @font-face is
       applied at the shell layer, not here. */
    --locator-font-family: ParagraphFont, Lato, Helvetica, Arial, sans-serif;

    /* Sidebar search heading: 22px, black-weight. */
    --locator-text-sidebar-title: 22px;
    --locator-font-weight-sidebar-title: 900;
    --locator-border-style-input: none;
    --locator-color-input-prefix: var(--locator-color-tertiary);
    --locator-color-locate-icon: var(--locator-color-tertiary);
    --locator-color-locate-icon-stroke: var(--locator-color-tertiary);
    --locator-color-locate-icon-fill: var(--locator-color-tertiary);

    /* No locations near banner */
    --locator-color-notice-button-background: #3f0854;
    --locator-notice-subtitle-order: 3;
    --locator-notice-icon-display: block;

    /* Results count ("N stores"): 14px, bold. */
    --locator-text-sidebar-results: 14px;
    --locator-font-weight-sidebar-results: 700;
    --locator-color-sidebar-results: var(--locator-color-muted);

    /* No-results notice: cream background (metro.scss). */
    --locator-color-notice-background: #fdf6ec;

    /* Card title: 16px, black-weight, 18px line-height (metro.scss .business-header__display-name). */
    --locator-text-card-title: 20px;
    --locator-font-weight-card-title: 900;
    --locator-leading-card-title: 18px;

    --locator-space-card-media-row-top: 0; /* Space between the card header and the image */

    --locator-color-card-distance: var(--locator-color-muted);

    /* Detail lines (open hours / address / phone): no leading icon. */
    --locator-color-card-hours-label: var(--locator-color-tertiary);
    --locator-card-detail-icon-display: none;

    --locator-border-width-card-selected: 2px;

    /* Card action buttons: icon stacked above the label; all buttons white with a primary-violet
       label (icon inherits the label). The grid buttons take their white fill + grey→black border
       from the DB button_* tokens (metro_theme.py); the featured CTA is made to match. */
    --locator-actions-button-direction: column;
    --locator-actions-button-gap: 4px;
    --locator-color-button-text: var(--locator-color-tertiary);
    --locator-color-featured-background: #ffffff;
    --locator-color-featured-text: var(--locator-color-tertiary);
    --locator-color-featured-border: var(--locator-color-button-border);
    --locator-color-featured-border-hover: #000000;

    --locator-color-button-icon: var(--locator-color-tertiary);
    --locator-text-button-icon: 24px;
}