/* Search Studio page tokens. Scoped to .sp-page / .bp-page; inherits semantic colors
   from css/base/variables.css so light and dark themes both work. */

.sp-page,
.bp-page {
    --sp-font-display: "Archivo", "Helvetica Neue", arial, sans-serif;
    --sp-font-data: "IBM Plex Mono", ui-monospace, sfmono-regular, menlo, monospace;
    --sp-font-body: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;
    --sp-ink: var(--color-text);
    --sp-ink-soft: var(--color-text-secondary);
    --sp-ink-faint: var(--color-text-muted);
    --sp-canvas: var(--color-canvas);
    --sp-surface: var(--color-surface);
    --sp-surface-sunk: var(--color-canvas-subtle);
    --sp-line: var(--color-border-subtle);
    --sp-line-strong: var(--color-border);
    /* Card outline: 1px, clearly readable on canvas, not heavy. */
    --sp-card-stroke: rgba(60, 60, 67, 0.22);
    --sp-accent: #445def;
    --sp-accent-deep: #2f40c2;
    --sp-accent-ink: #0b1028;
    --sp-accent-wash: rgba(68, 93, 239, 0.1);
    --sp-shell: 1400px;
    --sp-gutter: clamp(16px, 2vw, 24px);
    --sp-radius: 18px;
    --sp-radius-sm: 12px;
    --sp-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --sp-card-shadow: none;
    --sp-card-shadow-lift: none;
    --sp-hero-top: #e6eef4;
    --sp-hero-glow: rgba(68, 93, 239, 0.08);
}

:root[data-theme="dark"] .sp-page,
:root[data-theme="dark"] .bp-page {
    --sp-accent-deep: #5e7eff;
    --sp-accent-wash: rgba(68, 93, 239, 0.14);
    --sp-card-stroke: rgba(255, 255, 255, 0.18);
    --sp-card-shadow: none;
    --sp-card-shadow-lift: none;
    --sp-hero-top: #05080d;
    --sp-hero-glow: rgba(68, 93, 239, 0.16);
}

@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;
    }
}