/*
 * Frontend color scheme.
 * Loaded only on public pages (body.frontend-page).
 * Change palette values here; frontend.css and property-show.css consume these vars.
 */

.frontend-page {
    /* Brand — navy + steel (no purple) */
    --color-brand: #1f3a5f;
    --color-brand-dark: #152a44;
    --color-accent: #2c5282;
    --color-accent-dark: #1e3a5f;

    /* Backward-compatible aliases */
    --brand-navy: var(--color-brand);
    --brand-navy-dark: var(--color-brand-dark);
    --brand-gold: var(--color-accent);

    /* Text */
    --color-text: #1f2937;
    --color-text-muted: #4b5563;
    --color-text-subtle: #6b7280;
    --color-text-nav: #33415c;
    --color-text-tab: #5b6b80;
    --color-text-on-brand: #ffffff;
    --color-text-on-brand-muted: rgba(255, 255, 255, 0.85);

    /* Surfaces */
    --color-surface: #ffffff;
    --color-surface-muted: #f3f4f6;
    --color-surface-soft: #eef1f4;
    --color-surface-soft-hover: #e2e7ec;
    --color-hero-fallback: #dfe6ee;
    --color-border: #e9ecef;

    /* Semantic */
    --color-price: #1f3a5f;

    /* Layout — keep in sync with real header (topbar + navbar) */
    --frontend-header-height: 6rem;
    --frontend-main-pad-y: 1rem;

    /* Overlays & shadows */
    --color-hero-overlay-start: rgba(8, 14, 24, 0.5);
    --color-hero-overlay-end: rgba(8, 14, 24, 0.72);
    --color-shadow: rgba(2, 6, 23, 0.25);
    --color-shadow-soft: rgba(2, 6, 23, 0.14);
    --color-text-shadow: rgba(0, 0, 0, 0.35);
    --color-search-glass: rgb(255 255 255 / 0.22);
}

@media (min-width: 768px) {
    .frontend-page {
        --frontend-main-pad-y: 1.5rem;
    }
}