/* Shared theme foundations (Rebel.Shared.UI).
   Canonical --app-* tokens with values identical in every application.
   Application styles must not redefine shared palette or geometry tokens.
   Do not fork these names; change shared values here, once. */
:root {
    --app-brand-font-size: 18px;
    --app-brand-font-size-mobile: 18px;
    --app-brand-gap: 8px;
    --app-brand-icon-size: 20px;
    --app-brand-icon-size-mobile: 20px;
    --app-brand-mark-size: 32px;
    --app-brand-mark-size-mobile: 32px;
    --app-card-padding: 16px;
    --app-chip-text: var(--app-accent-text);
    --app-control-height: 48px;
    --app-desktop-nav-control-size: var(--app-nav-control-height);
    --app-desktop-nav-height: var(--app-header-height-desktop);
    --app-desktop-nav-radius: var(--app-nav-control-radius);
    --app-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --app-header-actions-gap: 8px;
    --app-header-gap: 8px;
    --app-header-height-desktop: 60px;
    --app-header-height-mobile: 56px;
    --app-header-inline-padding: 24px;
    --app-header-inline-padding-mobile: 12px;
    --app-header-max-width: none;
    --app-mobile-nav-bottom: 8px;
    --app-mobile-nav-clearance: calc(var(--app-mobile-nav-height) + var(--app-mobile-nav-bottom) + 16px + env(safe-area-inset-bottom, 0px));
    --app-mobile-nav-height: 64px;
    --app-mobile-nav-icon-size: 20px;
    --app-mobile-nav-item-radius: 12px;
    --app-mobile-nav-label-size: 11px;
    --app-mobile-nav-label-weight: 600;
    --app-mobile-nav-padding: 8px;
    --app-mobile-nav-radius: 18px;
    --app-mobile-nav-side: 12px;
    --app-nav-control-height: 44px;
    --app-nav-control-height-mobile: 44px;
    --app-nav-control-padding-inline: 12px;
    --app-nav-control-radius: 12px;
    --app-nav-control-radius-mobile: 12px;
    --app-nav-font-size: 14px;
    --app-nav-icon-size: 20px;
    /* Outer page gutters (Option A): mobile 12px, tablet 20px,
       standard desktop 24px, very wide desktop 32px. Pages consume
       this token directly; --app-gutter aliases it. */
    --app-page-padding-inline: 0.75rem;
    --app-page-padding-inline-mobile: 0.75rem;
    /* Option A composition scale. One source for rhythm, radii, and page
       gutters so page compositions do not re-derive them locally. */
    --app-space-1: 4px;
    --app-space-2: 8px;
    --app-space-3: 12px;
    --app-space-4: 16px;
    --app-space-5: 20px;
    --app-space-6: 24px;
    --app-space-8: 32px;
    --app-space-10: 40px;
    --app-space-12: 48px;
    --app-space-16: 64px;
    --app-radius-control: 12px;
    --app-radius-card: 16px;
    --app-radius-hero: 20px;
    --app-radius-dialog: 20px;
    --app-radius-sheet: 20px;
    --app-radius-badge: 8px;
    --app-page-gutter-tablet: 20px;
    --app-page-gutter-desktop: 24px;
    --app-page-gutter-wide: 32px;
    --app-page-gutter-mobile: 12px;
    --app-touch-target: 44px;
    --app-input-font-size-mobile: 16px;
    --app-hover-bg: color-mix(in srgb, var(--app-primary) 8%, transparent);
    --app-chip-bg: var(--app-accent-soft);
    --app-danger-soft: color-mix(in srgb, var(--app-danger) 12%, transparent);
    --app-warning-soft: color-mix(in srgb, var(--app-warning) 14%, transparent);
    --app-info-soft: color-mix(in srgb, var(--app-info) 14%, transparent);
    --app-success-text: var(--app-success);
    --app-warning-text: var(--app-warning);
    --app-danger-text: var(--app-danger);
    --app-info-text: var(--app-info);
    --z-sticky-header: 100;
    --z-mobile-nav: 120;
    --z-filter-sheet: 400;
    --z-dialog: 500;
    /* Results column policy ceilings per viewport tier. JavaScript reads these
       through getComputedStyle so Escort and Dating share one source. */
    --app-cards-max-mobile-sm: 1;
    --app-cards-max-mobile-lg: 2;
    --app-cards-max-tablet: 3;
    --app-cards-max-desktop: 4;
    --app-cards-max-wide: 5;
    --app-cards-max-ultrawide: 6;
    --app-rows-max-mobile-sm: 1;
    --app-rows-max-mobile-lg: 1;
    --app-rows-max-tablet: 2;
    --app-rows-max-desktop: 2;
    --app-rows-max-wide: 3;
    --app-rows-max-ultrawide: 4;
    --app-cards-min-column: 160px;
    --app-cards-min-column-desktop: 200px;
    --app-rows-min-column: 340px;
    /* Canonical TomSelect tokens. The closed control and the body-level
       dropdown both inherit these, so Dating and Escort cannot drift. */
    --ts-color-text: var(--app-text);
    --ts-color-background: var(--app-surface);
    --ts-color-dropdown-bg: var(--app-surface);
    --ts-color-border: var(--app-border);
    --ts-color-item-bg: var(--app-chip-bg);
    --ts-color-item-text: var(--app-accent-text);
    --ts-color-item-active-bg: rgba(var(--app-primary-rgb), 0.22);
    --ts-color-option-active-bg: rgba(var(--app-primary-rgb), 0.12);
    --ts-color-highlight-bg: rgba(var(--app-primary-rgb), 0.2);
}

@media (min-width: 641px) {
    :root {
        --app-page-padding-inline: var(--app-page-gutter-tablet);
    }
}

@media (min-width: 1024px) {
    :root {
        --app-page-padding-inline: var(--app-page-gutter-desktop);
    }
}

@media (min-width: 1600px) {
    :root {
        --app-page-padding-inline: var(--app-page-gutter-wide);
    }
}

[data-theme="dark"] {
    --app-accent: #AAA7FF;
    --app-accent-rgb: 170, 167, 255;
    --app-accent-soft: #30304A;
    --app-accent-text: #C3C0FF;
    --app-bg: #151618;
    --app-border: #383B41;
    --app-border-strong: #626874;
    --app-control-border: #747E8D;
    --app-button-primary-bg: #AAA7FF;
    --app-button-primary-text: #202124;
    --app-chip-value: #F2F2F0;
    --app-danger: #F0838B;
    --app-danger-soft: rgba(240, 131, 139, 0.14);
    --app-divider: #383B41;
    --app-focus-accent: #AAA7FF;
    --app-info: #7CC6DC;
    --app-info-soft: rgba(124, 198, 220, 0.14);
    --app-mbn-inactive: #A5A7AC;
    --app-mbn-inactive-hover: #F2F2F0;
    --app-on-primary: #202124;
    --app-primary: #AAA7FF;
    --app-primary-dark: #C3C0FF;
    --app-primary-rgb: 170, 167, 255;
    --app-primary-text: #202124;
    --app-scrollbar-thumb: #626874;
    --app-shadow-soft: 0 1px 2px rgb(0 0 0 / 24%), 0 8px 24px rgb(0 0 0 / 18%);
    --app-shadow-strong: 0 2px 8px rgb(0 0 0 / 30%), 0 16px 40px rgb(0 0 0 / 26%);
    --app-success: #7BD8A4;
    --app-success-soft: rgba(123, 216, 164, 0.14);
    --app-surface: #1D1F22;
    --app-surface-soft: #27292D;
    --app-surface-elevated: #24262B;
    --app-text: #F2F2F0;
    --app-text-muted: #A5A7AC;
    --app-text-soft: #C7C8CC;
    --app-warning: #E8B558;
    --app-warning-soft: rgba(232, 181, 88, 0.16);
}

[data-theme="light"] {
    --app-accent: #575BC7;
    --app-accent-rgb: 87, 91, 199;
    --app-accent-soft: #EBECFC;
    --app-accent-text: #4346B0;
    --app-bg: #F6F7FA;
    --app-border: #DADFE8;
    --app-border-strong: #A6AFBE;
    --app-control-border: #8792A5;
    --app-button-primary-bg: #575BC7;
    --app-button-primary-text: #FFFFFF;
    --app-chip-value: #202124;
    --app-danger: #B3261E;
    --app-danger-soft: #FBE9E7;
    --app-divider: #DADFE8;
    --app-focus-accent: #575BC7;
    --app-info: #0F6E8C;
    --app-info-soft: #E0F0F5;
    --app-mbn-inactive: #62656B;
    --app-mbn-inactive-hover: #202124;
    --app-on-primary: #FFFFFF;
    --app-primary: #575BC7;
    --app-primary-dark: #4346B0;
    --app-primary-rgb: 87, 91, 199;
    --app-primary-text: #FFFFFF;
    --app-scrollbar-thumb: #A6AFBE;
    --app-shadow-soft: 0 1px 2px rgb(20 28 48 / 4%), 0 8px 24px rgb(20 28 48 / 6%);
    --app-shadow-strong: 0 2px 8px rgb(20 28 48 / 8%), 0 16px 40px rgb(20 28 48 / 12%);
    --app-success: #1E7E46;
    --app-success-soft: #E3F3E9;
    --app-surface: #FFFFFF;
    --app-surface-soft: #EEF0F5;
    --app-surface-elevated: #FFFFFF;
    --app-text: #202124;
    --app-text-muted: #62656B;
    --app-text-soft: #41454C;
    --app-warning: #9A5F0E;
    --app-warning-soft: #FBF0DA;
}

:root { --app-content-gap: 24px; }
@media (max-width: 1023px) { :root { --app-content-gap: 16px; } }