/* ============================================================
   STARISE SURFACES — borderless frosted glass (shared, public site)
   ------------------------------------------------------------
   One vocabulary for every contained surface: promo panels, CTA
   cards, feature cards, floating panels, sheets and popups.
   Depth comes from blur, translucency and tone, never from a thin
   light outline and never from a blue glow. Page styles reference
   these tokens; the utility classes are for new surfaces.
   ============================================================ */
:root {
    --starise-blue: #0071e3;
    --starise-blue-hover: #0077ed;

    /* Dark sections and photography */
    --glass-bg: rgba(255,255,255,0.06);          /* quiet card on a dark section */
    --glass-bg-strong: rgba(255,255,255,0.10);   /* pills, chips, secondary buttons */
    --glass-dark: rgba(15,15,18,0.55);           /* panel over imagery */
    --glass-dark-strong: rgba(18,20,26,0.78);    /* sheets, popups, floating promos */

    /* Light sections */
    --glass-light: rgba(255,255,255,0.55);
    --glass-light-strong: rgba(255,255,255,0.78);

    --glass-blur: blur(18px) saturate(120%);
    --glass-blur-strong: blur(40px) saturate(170%);
    --glass-shadow: 0 12px 40px rgba(0,0,0,0.08);        /* light backgrounds */
    --glass-shadow-dark: 0 24px 60px rgba(0,0,0,0.35);   /* floating panels on dark */
    --glass-radius: 24px;
    --glass-radius-sm: 18px;

    /* Buttons: a soft neutral drop, never a coloured halo */
    --btn-shadow: 0 8px 20px rgba(0,0,0,0.16);
}

/* Utility surfaces (opt-in; existing components carry the same values inline) */
.glass, .glass-dark, .glass-light {
    border: 0;
    border-radius: var(--glass-radius);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}
.glass { background: var(--glass-bg); }
.glass-dark { background: var(--glass-dark); color: #fff; box-shadow: var(--glass-shadow-dark); }
.glass-light { background: var(--glass-light); color: #1d1d1f; box-shadow: var(--glass-shadow); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .glass-dark { background: rgba(18,20,26,0.96); }
    .glass-light { background: rgba(255,255,255,0.96); }
}

/* Keyboard focus: a deliberate ring, not a glow. Zero-specificity floor so a
   component that draws its own focus state (white pill turning blue) still wins. */
:where(a, button, [role="button"], input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--starise-blue);
    outline-offset: 3px;
}