/* ============================================
   Platform-wide frosted surface. `.global-glass` is the ONE frosted-glass
   treatment — a translucent fill, a blur behind it, a hairline rim and the
   inset top highlight that sells the material.

   It is a SURFACE TREATMENT, not a container: it carries no padding, no
   layout and (except on --strong, which owns a modal panel's whole shell)
   no radius. That is deliberate — it composes ONTO an existing card, panel
   or modal rather than replacing it:

       <div class="global-glass global-glass--static role-detail__card">
       <div class="modal global-modal-chrome global-modal-chrome--glass">

   Nick kept glass in the design language, so this is a real primitive, not
   a retirement. It stays allow-list only though (see the styleguide): full
   screen "moment" screens, premium reveal modals and the ink-tinted
   balance surface — never everyday list or filter chrome, which belongs on
   the opaque `.global-card`.

   `.global-glass` is a locked singleton (test_css_standards.py) — a second
   base definition fails the build.

   Variants: --primary / --success (ink + semantic tint), --strong
   (near-opaque modal panel frost), --static (non-interactive: no hover
   lift). Elevation is carried on two custom properties rather than
   hard-coded per rule, so a variant retunes the material by overriding the
   properties and the shared :hover rule follows it automatically.
   ============================================ */

/* ── Material tokens ── the rgba() alphas have no platform token (every
   --color-* is opaque), so the translucent film is defined once here and
   every rule below reads it through var(). Declared on both entry points —
   the standalone treatment and the modal-chrome opt-in — so the opt-in
   resolves the same material without depending on `.global-glass` also
   being present on the element. */
.global-glass,
.global-modal-chrome--glass .modal-content {
    --global-glass-blur: 16px;
    --global-glass-fill: rgba(255, 255, 255, 0.55);
    --global-glass-rim: rgba(255, 255, 255, 0.35);
    /* Base for the tint variants' color-mix: the white film the ink or
       semantic color is mixed INTO, for fill and rim respectively. */
    --global-glass-tint-base: rgba(255, 255, 255, 0.5);
    --global-glass-tint-rim-base: rgba(255, 255, 255, 0.3);
    --global-glass-shadow-resting:
        0 4px 24px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    --global-glass-shadow-raised:
        0 8px 32px var(--ink-alpha-10),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.global-glass {
    background: var(--global-glass-fill);
    backdrop-filter: blur(var(--global-glass-blur));
    -webkit-backdrop-filter: blur(var(--global-glass-blur));
    border: 1px solid var(--global-glass-rim);
    box-shadow: var(--global-glass-shadow-resting);
}

/* ── Tint variants ── the tint derives from the fixed action ink (or the
   platform semantic color) via color-mix — the same on every tenant. */

.global-glass--primary {
    background: color-mix(in srgb, var(--color-action) 18%, var(--global-glass-tint-base));
    border-color: color-mix(in srgb, var(--color-action) 20%, var(--global-glass-tint-rim-base));
}

.global-glass--success {
    background: color-mix(in srgb, var(--color-success) 18%, var(--global-glass-tint-base));
    border-color: color-mix(in srgb, var(--color-success) 20%, var(--global-glass-tint-rim-base));
}

/* --strong: a near-opaque, heavily-blurred panel frost for a reveal modal
   that must stay readable over arbitrary page content. Unlike the tint
   variants this owns the whole panel shell, so it also sets the radius and
   drops the hairline rim in favour of the inset ring inside its shadow.
   Overriding the material PROPERTIES (not the declarations) is what keeps
   the shared :hover rule below correct for this variant too. */
.global-glass--strong {
    --global-glass-blur: 24px;
    --global-glass-fill: rgba(255, 255, 255, 0.94);
    --global-glass-shadow-resting:
        0 24px 60px -16px rgba(15, 23, 42, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    --global-glass-shadow-raised:
        0 24px 60px -16px rgba(15, 23, 42, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;

    backdrop-filter: blur(var(--global-glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--global-glass-blur)) saturate(180%);
    border: 0;
    border-radius: var(--radius-xl);
}

/* ── Interaction ── the lift reads off the custom property, so a variant
   that retuned its elevation lifts from ITS OWN resting value. --static is
   the opt-out for a display-only surface (a details card, a modal panel):
   the pointer passing over it must not imply it is clickable. */
.global-glass:hover {
    box-shadow: var(--global-glass-shadow-raised);
}

.global-glass--static:hover {
    box-shadow: var(--global-glass-shadow-resting);
}

/* ── Composition hook ── lets a persistent Bootstrap dialog wearing the
   shared panel chrome opt into the frosted material without every modal
   paying for it. Pairs with `.global-modal-chrome` in components/modal.css,
   which still owns the panel radius and the elevation ladder. */
.global-modal-chrome--glass .modal-content {
    background: var(--global-glass-fill);
    backdrop-filter: blur(var(--global-glass-blur));
    -webkit-backdrop-filter: blur(var(--global-glass-blur));
}