/* PlaneSales Public — canonical design tokens (single source of truth for the public site) */
/* [Requirement("RFT-PSG-2026-0522")] — token unification (Order D of VOY-PSG-2026-0383) */
/* [Requirement("RFT-PSG-2026-0625")] — finding D2: this sheet is now the SOLE palette,
   spacing (--sp-*) and radius (--r-*) scale. The competing legacy :root in
   UI.Shared/css/planesales.css was removed; its shared components now resolve tokens with
   use-site fallbacks, so the public site renders from this canonical palette only. */
/* Loaded AFTER planesales.css and BEFORE app.css. Public-only: PlaneSales.Web.Seller and
   PlaneSales.Web.Admin load neither this sheet nor app.css, so they are unaffected by construction. */

:root {
    /* [RFT-PSG-2026-0727] Bootstrap font bridge — the public site is the only app that
       loads Bootstrap. bootstrap-reboot declares --bs-font-sans-serif and
       --bs-body-font-family on :root and points them at the OS system stack, and every
       Bootstrap component that sets font-family explicitly reads them (buttons via
       --bs-btn-font-family, form controls, .form-select, .input-group-text …). We never
       overrode them, so those controls rendered in the system font even while body copy
       was the brand face. This sheet loads AFTER bootstrap.min.css, and :root beats the
       `html` selector that carries --ps-font-family in the shared planesales.css, so both
       of these resolve to Inter. Font family only — no size or weight is set here. */
    --bs-font-sans-serif: var(--ps-font-family);
    --bs-body-font-family: var(--ps-font-family);

    /* Brand Colors */
    --ps-primary: #1B2E56;
    --ps-primary-hover: #113160;
    --ps-secondary: #2D93D1;
    --ps-secondary-hover: #2580B8;
    --ps-accent: #2D93D1;

    /* Background Colors */
    --ps-bg-primary: #f0f2f5;
    --ps-bg-secondary: #FFFFFF;
    --ps-bg-light: #e8eaed;
    --ps-bg-hover: #E8EEF5;

    /* Text Colors */
    --ps-text-primary: #202124;
    --ps-text-secondary: #3a3a3a;
    --ps-text-light: #616161;
    --ps-text-placeholder: #9aa0a6;

    /* Header/Footer */
    --ps-header-bg: #113160;
    --ps-header-text: #FFFFFF;
    --ps-footer-bg: #0E2247;
    --ps-footer-copyright-bg: #182130;
    --ps-footer-copyright-text: #FFFFFF;
    --ps-footer-link: #c0c6ce;

    /* Borders & Dividers */
    --ps-border-color: #dadce0;
    --ps-border-light: #e8eaed;
    --ps-divider: #bdc1c6;

    /* Shadows */
    --ps-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
    --ps-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
    --ps-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.14);
    --ps-shadow-card: 0 2px 6px rgba(0, 0, 0, 0.07);

    /* Semantic Colors */
    --ps-success: #34a853;
    --ps-warning: #fbbc04;
    --ps-danger: #ea4335;
    --ps-info: #4285f4;

    /* Bootstrap Overrides */
    --bs-primary: #1B2E56;
    --bs-primary-rgb: 27, 46, 86;
    --bs-secondary: #2D93D1;
    --bs-secondary-rgb: 45, 147, 209;
    --bs-body-bg: #f0f2f5;
    --bs-body-color: #202124;
    --bs-link-color: #2D93D1;
    --bs-link-hover-color: #1B2E56;

    /* ===== Prototype-v2 Design Tokens ===== */

    /* Spacing scale (8px base) */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  24px;
    --sp-6:  32px;
    --sp-8:  48px;
    --sp-10: 64px;
    --sp-12: 80px;

    /* Border radius */
    --r-xs:   4px;
    --r-sm:   6px;
    --r-md:   8px;
    --r-lg:   10px;
    --r-xl:   14px;
    --r-pill: 100px;

    /* Transitions (carsales-derived: 0.218s standard) */
    --t-fast: 0.218s;
    --t-std:  0.25s;
    --t-slow: 0.3s;

    /* Layout */
    --container-max:   1280px;
    --nav-height:      96px;
    /* Height of the /listings kind-tabs sub-bar (BUG-PSG-2026-0620). Single-sourced so the
       fixed strip height and the page-body header-clearance calc can never drift. */
    --kind-tabs-height: 48px;
    --sidebar-width:   265px;

    /* Ad colours */
    --ad-bg:     #f1f3f4;
    --ad-text:   #9aa0a6;
    --ad-border: #dadce0;

    /* Brand aliases (prototype-v2 names mapped) */
    --brand-navy:        #1B2E56;
    --brand-navy-dark:   #113160;
    --brand-navy-medium: #253F73;
    --brand-blue:        #2D93D1;
    --brand-blue-dark:   #2580B8;
    --brand-blue-light:  #5AAEE3;
    --page-bg:           #f0f2f5;
    --section-grey:      #e8eaed;
    --border:            #dadce0;
    --text-primary:      #202124;
    --text-secondary:    #3a3a3a;
    --text-muted:        #616161;
    --shadow-card:       0 2px 6px rgba(0, 0, 0, 0.07);
    --shadow-card-hover: 0 6px 18px rgba(0, 0, 0, 0.14);

    /* ===== Promoted fallback-only tokens (RFT-0522 §3) — rendered values preserved exactly ===== */
    --section-white:          #ffffff;
    --success-light:          #e6f4ea;
    --info-light:             #e8f0fe;
    --brand-navy-light:       #4a6fa5;
    --brand-pale-blue-border: #7baacf;
    --brand-pale-blue-bg:     #99c5ff;

    /* ===== Named tokens for former bare hexes (RFT-0522 §5) — rendered values preserved exactly ===== */
    /* Neutral surfaces & borders */
    --surface-subtle:    #f8f9fa;
    --surface-alt:       #fafafa;
    --surface-pressed:   #f0f0f0;
    --panel-grad-top:    #f7f8f9;
    --panel-grad-bottom: #eceef0;
    --border-muted:      #d8dadc;
    --border-neutral:    #929292;
    /* Slate accents (filter UI) */
    --slate-50:            #f1f5f9;
    --slate-text:          #475569;
    --slate-text-strong:   #334155;
    --slate-border:        #cbd5e1;
    --slate-border-strong: #94a3b8;
    --chip-border:         #c5d9f0;
    /* Brand-adjacent blues / navies */
    --accent-sky:        #7DC8EF;
    --link-blue:         #1967d2;
    --navy-deepest:      #0c1a3a;
    --navy-gradient-mid: #2054a0;
    /* Overlays & ad chrome */
    --tooltip-bg:          #1e2a3a;
    --ad-placeholder-text: #8d9399;
    --ad-dims-text:        #bec4ca;
    /* Status accents */
    --outline-success: #26b050;
    --outline-error:   #e50000;
    --error-bg-strong: #b32121;
    --success-icon:    #27ae60;
    --heart-active:    #e0245e;
    --slate-active:     #1e3a5f;
    --danger-strong:    #c5221a;
    --badge-reduced-bg: #e8710a;
    --text-on-warning:  #000000;
}

/* [BUG-PSG-2026-0619] Shorter fixed nav bar on phones. The desktop bar (96px) is too tall
   once the logo shrinks; 72px matches the reduced mobile logo (≤44px + 22px padding = 66px)
   and, being a token override, keeps .ps-nav height, .page-body padding-top and every
   calc(var(--nav-height) …) sticky offset consistent. Public-only sheet (see header). */
@media (max-width: 767.98px) {
    :root {
        --nav-height: 72px;
        /* [BUG-PSG-2026-0620] Slightly shorter kind-tabs bar on phones — still a ≥44px tap
           target — to match the reduced mobile nav and preserve content viewport. */
        --kind-tabs-height: 44px;
    }
}