/* ========================================================================
   Salsabeel Page Design System
   ------------------------------------------------------------------------
   Page-scoped primitives only. The approved site header intentionally sits
   outside `.sb-page`, so these rules cannot alter its markup or layout.
   ======================================================================== */

:where(.sb-page) {
    --sb-navy-950: #071c2d;
    --sb-navy-900: #0b2944;
    --sb-navy-800: #0f3759;
    --sb-navy-700: #164973;
    --sb-gold-700: #9c6c12;
    --sb-gold-600: #c28b1e;
    --sb-gold-500: #dfa835;
    --sb-gold-300: #f3cf7a;
    --sb-ink: #17283a;
    --sb-muted: #64748b;
    --sb-surface: #ffffff;
    --sb-surface-soft: #f7f9fc;
    --sb-border: #dce5ed;
    --sb-focus: #2f80c2;
    --sb-container: 1380px;
    --sb-radius-sm: 12px;
    --sb-radius-md: 18px;
    --sb-radius-lg: 28px;
    --sb-shadow-sm: 0 8px 24px rgba(15, 55, 89, 0.07);
    --sb-shadow-md: 0 18px 50px rgba(15, 55, 89, 0.11);
    --sb-shadow-lg: 0 28px 80px rgba(7, 28, 45, 0.16);
    color: var(--sb-ink);
}

:where(.sb-page) *,
:where(.sb-page) *::before,
:where(.sb-page) *::after {
    box-sizing: border-box;
}

:where(.sb-page) :focus-visible {
    outline: 3px solid color-mix(in srgb, var(--sb-focus) 72%, white);
    outline-offset: 3px;
}

.sb-page-container {
    width: min(calc(100% - 40px), var(--sb-container));
    margin-inline: auto;
}

.sb-page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 36px;
    padding: 0.45rem 1rem;
    border: 1px solid rgba(194, 139, 30, 0.38);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--sb-gold-300);
    font-size: 0.9rem;
    font-weight: 800;
    backdrop-filter: blur(12px);
}

.sb-page-card {
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-md);
    background: var(--sb-surface);
    box-shadow: var(--sb-shadow-sm);
}

.sb-page-section-title {
    color: var(--sb-navy-800);
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.sb-page-section-copy {
    max-width: 68ch;
    color: var(--sb-muted);
    font-size: 1.05rem;
    line-height: 1.9;
}

@media (max-width: 768px) {
    .sb-page-container {
        width: min(calc(100% - 30px), var(--sb-container));
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(.sb-page) *,
    :where(.sb-page) *::before,
    :where(.sb-page) *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}