/**
 * Search page tokens — emptyjet Design Pack v1 (same palette as .hm-page).
 *
 * Scoped to .sp-page / .bp-page. Search keeps a 1400px shell; geometry is
 * square (pack deal cards / header chrome), not the old rounded studio.
 * Inter only — display 300, body 400, labels 500.
 *
 * Spec: offer.emptyjet.com/designs/pack
 */

html:has(body.sp-page) {
    --primary: #2f6fed;
    --primary-hover: #3d7af5;
    --primary-light: rgba(47, 111, 237, 0.1);
    --primary-dark: #2560d6;
    --color-control-active: rgba(47, 111, 237, 0.1);
    --color-focus-ring: rgba(47, 111, 237, 0.22);
    --color-browser-chrome: #2f6fed;
    --color-scrollbar: rgba(47, 111, 237, 0.42);
    --color-scrollbar-hover: rgba(47, 111, 237, 0.7);
    scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-track);
}

html[data-theme="dark"]:has(body.sp-page) {
    --primary: #5b8cff;
    --primary-hover: #6e9aff;
    --primary-light: rgba(91, 140, 255, 0.16);
    --primary-dark: #4a7af0;
    --color-control-active: rgba(91, 140, 255, 0.18);
    --color-focus-ring: rgba(91, 140, 255, 0.3);
    --color-browser-chrome: #0a0b0e;
    --color-scrollbar: rgba(91, 140, 255, 0.42);
    --color-scrollbar-hover: rgba(91, 140, 255, 0.7);
    scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-track);
}

html:has(body.sp-page) ::-webkit-scrollbar-thumb {
    border-radius: 0;
    background: var(--color-scrollbar);
}

html:has(body.sp-page) ::-webkit-scrollbar-thumb:hover {
    background: var(--color-scrollbar-hover);
}

.sp-page,
.bp-page {
    --sp-font-display:
        "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;
    --sp-font-data:
        "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;
    --sp-font-body:
        "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;
    --sp-weight-display: 300;
    --sp-weight-body: 400;
    --sp-weight-label: 500;

    --sp-ink: #0e1a2c;
    --sp-ink-soft: #3e4b5e;
    --sp-ink-faint: #6b7686;
    --sp-canvas: #f5f7fa;
    --sp-surface: #ffffff;
    --sp-surface-sunk: #eceff3;
    --sp-line: rgba(14, 26, 44, 0.12);
    --sp-line-strong: rgba(14, 26, 44, 0.18);
    --sp-card-stroke: rgba(14, 26, 44, 0.18);

    --sp-accent: #2f6fed;
    --sp-accent-deep: #2560d6;
    --sp-accent-ink: #ffffff;
    --sp-accent-wash: rgba(47, 111, 237, 0.1);
    --sp-cta: #2b4666;
    --sp-cta-ink: #ffffff;

    --primary: #2f6fed;
    --primary-hover: #3d7af5;
    --primary-light: rgba(47, 111, 237, 0.1);
    --primary-dark: #2560d6;
    --color-control-active: rgba(47, 111, 237, 0.1);
    --color-focus-ring: rgba(47, 111, 237, 0.22);

    --sp-shell: 1400px;
    --sp-gutter: clamp(16px, 2vw, 24px);
    --sp-radius: 0;
    --sp-radius-sm: 0;
    --sp-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --sp-card-shadow: none;
    --sp-card-shadow-lift: none;
    --sp-hero-top: #e8eef5;
    --sp-hero-glow: rgba(47, 111, 237, 0.05);
}

:root[data-theme="dark"] .sp-page,
:root[data-theme="dark"] .bp-page {
    --sp-ink: #f2f4f7;
    --sp-ink-soft: #b8c0cc;
    --sp-ink-faint: #7c8797;
    --sp-canvas: #0a0b0e;
    --sp-surface: #12141a;
    --sp-surface-sunk: #181b22;
    --sp-line: rgba(255, 255, 255, 0.12);
    --sp-line-strong: rgba(255, 255, 255, 0.18);
    --sp-card-stroke: rgba(255, 255, 255, 0.18);

    --sp-accent: #5b8cff;
    --sp-accent-deep: #5b8cff;
    --sp-accent-ink: #ffffff;
    --sp-accent-wash: rgba(91, 140, 255, 0.14);
    --sp-cta: #4a6a8f;
    --sp-cta-ink: #ffffff;

    --primary: #5b8cff;
    --primary-hover: #6e9aff;
    --primary-light: rgba(91, 140, 255, 0.16);
    --primary-dark: #4a7af0;
    --color-control-active: rgba(91, 140, 255, 0.18);
    --color-focus-ring: rgba(91, 140, 255, 0.3);

    --sp-card-shadow: none;
    --sp-card-shadow-lift: none;
    --sp-hero-top: #050505;
    --sp-hero-glow: rgba(91, 140, 255, 0.12);
}

@keyframes sp-shimmer {
    to {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-page *,
    .sp-page *::before,
    .sp-page *::after,
    .bp-page *,
    .bp-page *::before,
    .bp-page *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}