/**
 * Precision Yard — public catalog + vehicle detail design tokens.
 * Single :root map; consume via var(--pub-py-*) in inline styles and injected CSS.
 */

:root {
    /* Typography stacks (match VehicleDetailPage / PublicInventoryPage) */
    --pub-py-font-display: 'Barlow Condensed', sans-serif;
    --pub-py-font-body: 'DM Sans', sans-serif;

    /* Core palette — brand: Navy #1A1A2E, Cyan #67cae1, Blue #5BC8E8 */
    --pub-py-headline: #1A1A2E;
    --pub-py-secondary: #64748b;
    --pub-py-muted: #94a3b8;
    --pub-py-accent: #333333;
    --pub-py-slate-700: #334155;

    /* Cyan / CTA — brand accent #67cae1 */
    --pub-py-amber: #67cae1;
    --pub-py-amber-dark: #1A1A2E;
    --pub-py-amber-text: #1A1A2E;
    --pub-py-amber-600: #42b4d6;
    --pub-py-amber-hover: #55bedd;
    --pub-py-amber-focus: rgba(103, 202, 225, 0.25);
    --pub-py-amber-bg: rgba(103, 202, 225, 0.08);
    --pub-py-amber-tint: rgba(103, 202, 225, 0.1);

    /* Surfaces */
    --pub-py-chip-bg: #f1f5f9;
    --pub-py-border: #e2e8f0;
    --pub-py-card: #ffffff;
    --pub-py-page-bg: #f8fafc;
    --pub-py-icon-muted: #cbd5e1;

    /* Skeleton */
    --pub-py-skeleton-base: #e2e8f0;
    --pub-py-skeleton-mid: #f1f5f9;

    /* Catalog card typography (VehicleCard) */
    --pub-py-card-title-size: 1.375rem;
    --pub-py-card-model-size: 0.875rem;
    /* Title (1 line) + gap + model (up to 2 lines at line-height 1.35) — stable grid row height */
    --pub-py-card-headline-stack-min-height: 4.2rem;
    --pub-py-card-content-pad-x: 18px;
    --pub-py-card-content-pad-y-top: 16px;
    --pub-py-card-content-pad-y-bottom: 18px;

    /* VehicleCard hero: 16/9 frame — see `#root .pub-inv-card-media` in public-precision-yard-motion.css */

    /* Spec row: max visible chips + "+N" overflow (VehicleCard) */
    --pub-py-spec-overflow-bg: #f1f5f9;
    --pub-py-spec-overflow-border: #e2e8f0;
    --pub-py-spec-overflow-text: #64748b;
    --pub-py-spec-overflow-font-size: 11px;

    /* Location row — de-emphasized vs spec chips */
    --pub-py-location-muted-bg: rgba(248, 250, 252, 0.95);
    --pub-py-location-muted-border: rgba(226, 232, 240, 0.85);
    --pub-py-location-muted-divider: rgba(226, 232, 240, 0.65);
    --pub-py-location-muted-text: #64748b;
    --pub-py-location-muted-icon: #94a3b8;
    --pub-py-location-muted-size: 11px;

    /*
     * VehicleCard hero media: scrim + badges + photo count (aligned slate overlay family).
     * New + distance: amber pills; GPS: distinct slate-teal (not emerald).
     */
    --pub-py-hero-badge-amber-bg: rgba(103, 202, 225, 0.92);
    --pub-py-hero-badge-amber-text: #1A1A2E;
    --pub-py-hero-badge-gps-bg: rgba(91, 200, 232, 0.92);
    --pub-py-hero-badge-gps-text: #1A1A2E;
    --pub-py-hero-scrim-bottom: rgba(26, 26, 46, 0.5);
    --pub-py-hero-scrim-mid: rgba(26, 26, 46, 0.12);
    --pub-py-hero-overlay-strong: rgba(26, 26, 46, 0.72);
    --pub-py-hero-overlay-text: #ffffff;

    /* Catalog masthead (PublicInventoryPage `page-header` dark band) */
    --pub-py-masthead-bg: #1A1A2E;
    --pub-py-masthead-diagonal-texture: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 48px,
        rgba(255, 255, 255, 0.013) 48px,
        rgba(255, 255, 255, 0.013) 49px
    );
    --pub-py-masthead-headline-on-dark: #ffffff;
    --pub-py-masthead-stat-label-muted: rgba(255, 255, 255, 0.72);
    --pub-py-masthead-rule-fade: rgba(103, 202, 225, 0.18);

    /* Radii & shadows */
    --pub-py-radius: 14px;
    /* Layered slate-tinted elevation — reads cleaner on #f8fafc than flat gray shadow */
    --pub-py-shadow-card: 0 1px 2px rgba(26, 26, 46, 0.05), 0 4px 18px rgba(26, 26, 46, 0.06);
    --pub-py-shadow-hover: 0 8px 32px rgba(26, 26, 46, 0.11), 0 2px 8px rgba(26, 26, 46, 0.05);
    --pub-py-shadow-skeleton: 0 2px 8px rgba(0, 0, 0, 0.07);

    /* Catalog filter strip (ReportFilterToolbar + dropdowns when precisionYardPublic) */
    --pub-py-filter-surface: rgba(255, 255, 255, 0.92);
    --pub-py-filter-input-bg: var(--pub-py-chip-bg);
    --pub-py-filter-ring-open: var(--pub-py-amber-focus);

    /* Chrome */
    --pub-py-sticky-bar-bg: rgba(255, 255, 255, 0.88);
    --pub-py-focus-ring: #3AAAC8;
    --pub-py-focus-halo: rgba(58, 170, 200, 0.2);
    --pub-py-white: #ffffff;

    /* Error / destructive */
    --pub-py-error-bg: #fff5f5;
    --pub-py-error-border: #fed7d7;
    --pub-py-error-icon: #e53e3e;
    --pub-py-error-title: #c53030;
    --pub-py-error-body: #718096;
    --pub-py-error-clipboard: #b91c1c;

    /*
     * Vehicle detail — “fresh” emerald (SpecRow Time in Yard ≤14d, New arrival banner).
     * Preserves legacy rgba values; use via var(--pub-py-fresh-*) in VehicleDetailPage / T object.
     */
    --pub-py-fresh-spec-badge-bg: rgba(16, 185, 129, 0.12);
    --pub-py-fresh-spec-badge-text: rgba(16, 185, 129, 0.9);
    --pub-py-fresh-banner-bg: rgba(16, 185, 129, 0.08);
    --pub-py-fresh-banner-border: rgba(16, 185, 129, 0.3);
    --pub-py-fresh-banner-text: rgba(16, 185, 129, 0.9);
    --pub-py-fresh-banner-radius: 8px;

    /*
     * Vehicle detail — typography & vertical rhythm (VehicleDetailPage).
     * Steps: H1 > SectionHeader > group title > spec label > spec value.
     */
    --pub-py-detail-group-title-size: 12px;
    --pub-py-detail-group-title-weight: 700;
    --pub-py-detail-group-title-tracking: 0.07em;
    --pub-py-detail-spec-label-size: 10px;
    --pub-py-detail-spec-value-size: 16px;
    --pub-py-detail-spec-row-gap: 4px;
    --pub-py-detail-hero-block-gap: 24px;
    --pub-py-detail-space-xs: 8px;
    --pub-py-detail-space-sm: 12px;
    --pub-py-detail-space-md: 16px;
    /* Inter-card / content-column rhythm (grid gap + stacked-card spacing). Alias of catalog gap. */
    --pub-py-detail-section-gap: 20px;

    /* Vehicle detail — sticky bar accent */
    --pub-py-detail-sticky-accent: var(--pub-py-amber);
    --pub-py-detail-sticky-accent-height: 3px;

    /* Vehicle detail — hero masthead (dark band, matches catalog masthead) */
    --pub-py-detail-masthead-bg: var(--pub-py-masthead-bg);
    --pub-py-detail-masthead-texture: var(--pub-py-masthead-diagonal-texture);
    --pub-py-detail-masthead-headline: var(--pub-py-masthead-headline-on-dark);
    --pub-py-detail-masthead-sub: rgba(255, 255, 255, 0.55);
    --pub-py-detail-masthead-rule: var(--pub-py-masthead-rule-fade);
    --pub-py-detail-masthead-pad-y: 28px;
    --pub-py-detail-masthead-pad-y-mobile: 20px;

    /* Vehicle detail — CTA hover */
    --pub-py-detail-cta-hover-bg: var(--pub-py-amber-hover);
    --pub-py-detail-cta-hover-shadow: 0 4px 16px rgba(103, 202, 225, 0.25);

    /* Vehicle detail — spec group icons */
    --pub-py-detail-group-icon-size: 16px;
    --pub-py-detail-group-icon-color: var(--pub-py-amber-600);

    /* Vehicle detail — breadcrumb */
    --pub-py-detail-breadcrumb-separator: var(--pub-py-muted);
    --pub-py-detail-breadcrumb-hover: var(--pub-py-amber-text);

    /*
     * Catalog vertical rhythm (PublicInventoryPage — ResultsStrip, grid shell, Pagination).
     * Use in inline styles: marginTop/marginBottom with var() / calc(... * var(--pub-py-catalog-section-gap)).
     */
    --pub-py-catalog-section-gap: 20px;

    /* Card entrance stagger for .pub-inv-animate — consumed by public-precision-yard-motion.css */
    --pub-py-stagger-step-ms: 24ms;

    /*
     * Sidebar filter panel (PublicInventoryPage — desktop aside + mobile drawer).
     * Width is consumed by JS (PUBLIC_SIDEBAR_WIDTH_PX) for grid column math.
     */
    --pub-py-sidebar-width: 280px;
    --pub-py-sidebar-bg: var(--pub-py-card);
    --pub-py-sidebar-border: var(--pub-py-border);
    --pub-py-sidebar-radius: var(--pub-py-radius);
    --pub-py-sidebar-shadow: var(--pub-py-shadow-card);
    --pub-py-sidebar-section-gap: 18px;
    --pub-py-sidebar-label-size: 10px;
    --pub-py-sidebar-label-color: var(--pub-py-muted);
    --pub-py-sidebar-label-tracking: 0.08em;
    --pub-py-sidebar-divider: rgba(226, 232, 240, 0.65);

    /* Mobile filter drawer overlay */
    --pub-py-drawer-backdrop: rgba(26, 26, 46, 0.5);
    --pub-py-drawer-width: min(85vw, 360px);
}