/**
 * Glassmorphism System — Presets
 *
 * All .glass-fx-* classes. Uses both -webkit-backdrop-filter (Safari)
 * and backdrop-filter (standard).
 *
 * THE BLUR IS CAPPED, NOT SET (2026-09-14). Each preset keeps its own literal
 * radius and clamps it with `min(Npx, var(--glass-fx-blur-max, 999px))`, so the
 * mobile rule in base.css can lower a blur and can never raise one. The old
 * note here said the values were "fixed for Safari compat", and that made the
 * media query in base.css unreachable by construction: it set --glass-fx-blur,
 * which nothing read. It also set one flat 8px, which would have RAISED
 * glass-fx-subtle from 6px — a second bug in the same rule, invisible because
 * the rule never ran.
 *
 * WHY EVERY WASH IS A background-image AND NOT background (2026-09-14).
 *
 * These presets were written with the `background` shorthand, which REPLACES
 * the element's own background rather than sitting over it. On a component
 * that is harmless — a component has no background of its own, so the backdrop
 * shows through either way. On a part that paints its own ground it is not:
 *
 *     .bar--bg-solid { background-color: var(--color-base-100); }   (0,1,0)
 *     [data-theme*="-brand"].glass-fx-subtle { background: … }       (0,2,0)
 *
 * The wash won and the bar lost its ground. In dark mode that went unnoticed
 * because the wash is rgba(17,25,40,0.4–0.75), opaque enough to BE a ground.
 * In brand mode the wash is 8–12% primary — ~90% transparent — so the bar
 * showed the light page behind it while its own theme painted the text white.
 * Unreadable, and the same cause made the tinted presets fail in dark mode.
 *
 * A wash is a wash. Painting it as a background-image leaves background-color
 * to whoever owns the ground, so glass is additive everywhere: over a part's
 * own ground where there is one, over the backdrop where there is not. It also
 * removes a source-order dependency — in light mode `.bar--bg-solid` and
 * `.glass-fx-subtle` are both (0,1,0), so which won was decided by stylesheet
 * order. Different properties no longer compete.
 *
 * The three fallbacks in base.css deliberately keep the `background` shorthand:
 * @supports, prefers-reduced-transparency and print must REPLACE the wash with
 * an opaque surface, and the shorthand resets background-image to none.
 */

/* ==========================================================================
   Glass Subtle — light frosting
   ========================================================================== */

.glass-fx-subtle {
    -webkit-backdrop-filter: blur(min(6px, var(--glass-fx-blur-max, 999px)));
    backdrop-filter: blur(min(6px, var(--glass-fx-blur-max, 999px)));
    background-image: linear-gradient(color-mix(in oklch, var(--color-base-100) 15%, transparent), color-mix(in oklch, var(--color-base-100) 15%, transparent));
    border: 1px solid color-mix(in oklch, var(--color-base-100) 25%, transparent);
    box-shadow: 0 2px 8px color-mix(in oklch, var(--color-neutral) 8%, transparent);
}

[data-theme*="-dark"] .glass-fx-subtle,
[data-theme*="-dark"].glass-fx-subtle {
    background-image: linear-gradient(color-mix(in oklch, var(--color-neutral) 40%, transparent), color-mix(in oklch, var(--color-neutral) 40%, transparent));
    border-color: color-mix(in oklch, var(--color-base-100) 8%, transparent);
    box-shadow: 0 2px 8px color-mix(in oklch, var(--color-neutral) 20%, transparent);
}

[data-theme*="-brand"] .glass-fx-subtle,
[data-theme*="-brand"].glass-fx-subtle {
    background-image: linear-gradient(color-mix(in oklch, var(--color-primary) 10%, transparent), color-mix(in oklch, var(--color-primary) 10%, transparent));
    border-color: color-mix(in oklch, var(--color-primary) 15%, transparent);
    box-shadow: 0 2px 8px color-mix(in oklch, var(--color-primary) 10%, transparent);
}

/* ==========================================================================
   Glass Medium — standard glass
   ========================================================================== */

.glass-fx-medium {
    -webkit-backdrop-filter: blur(min(12px, var(--glass-fx-blur-max, 999px)));
    backdrop-filter: blur(min(12px, var(--glass-fx-blur-max, 999px)));
    background-image: linear-gradient(color-mix(in oklch, var(--color-base-100) 12%, transparent), color-mix(in oklch, var(--color-base-100) 12%, transparent));
    border: 1px solid color-mix(in oklch, var(--color-base-100) 20%, transparent);
    box-shadow: 0 4px 16px color-mix(in oklch, var(--color-neutral) 8%, transparent);
}

[data-theme*="-dark"] .glass-fx-medium,
[data-theme*="-dark"].glass-fx-medium {
    background-image: linear-gradient(color-mix(in oklch, var(--color-neutral) 50%, transparent), color-mix(in oklch, var(--color-neutral) 50%, transparent));
    border-color: color-mix(in oklch, var(--color-base-100) 8%, transparent);
    box-shadow: 0 4px 16px color-mix(in oklch, var(--color-neutral) 25%, transparent);
}

[data-theme*="-brand"] .glass-fx-medium,
[data-theme*="-brand"].glass-fx-medium {
    background-image: linear-gradient(color-mix(in oklch, var(--color-primary) 12%, transparent), color-mix(in oklch, var(--color-primary) 12%, transparent));
    border-color: color-mix(in oklch, var(--color-primary) 18%, transparent);
    box-shadow: 0 4px 16px color-mix(in oklch, var(--color-primary) 12%, transparent);
}

/* ==========================================================================
   Glass Heavy — strong frosting
   ========================================================================== */

.glass-fx-heavy {
    -webkit-backdrop-filter: blur(min(20px, var(--glass-fx-blur-max, 999px)));
    backdrop-filter: blur(min(20px, var(--glass-fx-blur-max, 999px)));
    background-image: linear-gradient(color-mix(in oklch, var(--color-base-100) 8%, transparent), color-mix(in oklch, var(--color-base-100) 8%, transparent));
    border: 1px solid color-mix(in oklch, var(--color-base-100) 15%, transparent);
    box-shadow: 0 8px 32px color-mix(in oklch, var(--color-neutral) 10%, transparent);
}

[data-theme*="-dark"] .glass-fx-heavy,
[data-theme*="-dark"].glass-fx-heavy {
    background-image: linear-gradient(color-mix(in oklch, var(--color-neutral) 60%, transparent), color-mix(in oklch, var(--color-neutral) 60%, transparent));
    border-color: color-mix(in oklch, var(--color-base-100) 6%, transparent);
    box-shadow: 0 8px 32px color-mix(in oklch, var(--color-neutral) 30%, transparent);
}

[data-theme*="-brand"] .glass-fx-heavy,
[data-theme*="-brand"].glass-fx-heavy {
    background-image: linear-gradient(color-mix(in oklch, var(--color-primary) 8%, transparent), color-mix(in oklch, var(--color-primary) 8%, transparent));
    border-color: color-mix(in oklch, var(--color-primary) 12%, transparent);
    box-shadow: 0 8px 32px color-mix(in oklch, var(--color-primary) 15%, transparent);
}

/* ==========================================================================
   Glass Frosted Nav — saturated frosted navigation
   ========================================================================== */

.glass-fx-frosted-nav {
    -webkit-backdrop-filter: blur(min(12px, var(--glass-fx-blur-max, 999px))) saturate(1.5);
    backdrop-filter: blur(min(12px, var(--glass-fx-blur-max, 999px))) saturate(1.5);
    background-image: linear-gradient(color-mix(in oklch, var(--color-base-100) 70%, transparent), color-mix(in oklch, var(--color-base-100) 70%, transparent));
    border-bottom: 1px solid color-mix(in oklch, var(--color-base-100) 30%, transparent);
    box-shadow: 0 1px 4px color-mix(in oklch, var(--color-neutral) 6%, transparent);
}

[data-theme*="-dark"] .glass-fx-frosted-nav,
[data-theme*="-dark"].glass-fx-frosted-nav {
    background-image: linear-gradient(color-mix(in oklch, var(--color-neutral) 75%, transparent), color-mix(in oklch, var(--color-neutral) 75%, transparent));
    border-bottom-color: color-mix(in oklch, var(--color-base-100) 8%, transparent);
    box-shadow: 0 1px 4px color-mix(in oklch, var(--color-neutral) 20%, transparent);
}

/* The only preset that still needed a brand rule after the wash became a
   background-image. The other four without one — tinted-brand, tinted-warm,
   tinted-cool and dark — read correctly in brand mode on their light rules,
   because those are 12-20% tints and the brand ground shows through. This one
   is white at 70%: opaque enough to wash the brand ground out, which left the
   bar pale mint under white text. Measured on ?wip=bar-modes §4. */
[data-theme*="-brand"] .glass-fx-frosted-nav,
[data-theme*="-brand"].glass-fx-frosted-nav {
    background-image: linear-gradient(color-mix(in oklch, var(--color-primary) 25%, transparent),
                                      color-mix(in oklch, var(--color-primary) 25%, transparent));
    border-bottom-color: color-mix(in oklch, var(--color-primary) 30%, transparent);
    box-shadow: 0 1px 4px color-mix(in oklch, var(--color-primary) 15%, transparent);
}

/* ==========================================================================
   Glass Tinted Brand — primary color tinted glass
   ========================================================================== */

.glass-fx-tinted-brand {
    -webkit-backdrop-filter: blur(min(12px, var(--glass-fx-blur-max, 999px))) saturate(1.4);
    backdrop-filter: blur(min(12px, var(--glass-fx-blur-max, 999px))) saturate(1.4);
    background-image: linear-gradient(color-mix(in oklch, var(--color-primary) 15%, transparent), color-mix(in oklch, var(--color-primary) 15%, transparent));
    border: 1px solid color-mix(in oklch, var(--color-primary) 20%, transparent);
    box-shadow: 0 4px 16px color-mix(in oklch, var(--color-primary) 10%, transparent);
}

[data-theme*="-dark"] .glass-fx-tinted-brand,
[data-theme*="-dark"].glass-fx-tinted-brand {
    background-image: linear-gradient(color-mix(in oklch, var(--color-primary) 20%, transparent), color-mix(in oklch, var(--color-primary) 20%, transparent));
    border-color: color-mix(in oklch, var(--color-primary) 15%, transparent);
}

/* ==========================================================================
   Glass Tinted Warm — warm-toned glass
   ========================================================================== */

.glass-fx-tinted-warm {
    -webkit-backdrop-filter: blur(min(14px, var(--glass-fx-blur-max, 999px))) saturate(1.2);
    backdrop-filter: blur(min(14px, var(--glass-fx-blur-max, 999px))) saturate(1.2);
    background-image: linear-gradient(color-mix(in oklch, var(--color-warning) 12%, transparent), color-mix(in oklch, var(--color-warning) 12%, transparent));
    border: 1px solid color-mix(in oklch, var(--color-warning) 20%, transparent);
    box-shadow: 0 4px 16px color-mix(in oklch, var(--color-warning) 8%, transparent);
}

[data-theme*="-dark"] .glass-fx-tinted-warm,
[data-theme*="-dark"].glass-fx-tinted-warm {
    background-image: linear-gradient(color-mix(in oklch, var(--color-warning) 15%, transparent), color-mix(in oklch, var(--color-warning) 15%, transparent));
    border-color: color-mix(in oklch, var(--color-warning) 12%, transparent);
}

/* ==========================================================================
   Glass Tinted Cool — cool-toned glass
   ========================================================================== */

.glass-fx-tinted-cool {
    -webkit-backdrop-filter: blur(min(14px, var(--glass-fx-blur-max, 999px))) saturate(1.2);
    backdrop-filter: blur(min(14px, var(--glass-fx-blur-max, 999px))) saturate(1.2);
    background-image: linear-gradient(color-mix(in oklch, var(--color-info) 12%, transparent), color-mix(in oklch, var(--color-info) 12%, transparent));
    border: 1px solid color-mix(in oklch, var(--color-info) 20%, transparent);
    box-shadow: 0 4px 16px color-mix(in oklch, var(--color-info) 8%, transparent);
}

[data-theme*="-dark"] .glass-fx-tinted-cool,
[data-theme*="-dark"].glass-fx-tinted-cool {
    background-image: linear-gradient(color-mix(in oklch, var(--color-info) 15%, transparent), color-mix(in oklch, var(--color-info) 15%, transparent));
    border-color: color-mix(in oklch, var(--color-info) 12%, transparent);
}

/* ==========================================================================
   Glass Dark — dark glass panels
   ========================================================================== */

.glass-fx-dark {
    -webkit-backdrop-filter: blur(min(14px, var(--glass-fx-blur-max, 999px)));
    backdrop-filter: blur(min(14px, var(--glass-fx-blur-max, 999px)));
    background-image: linear-gradient(color-mix(in oklch, var(--color-neutral) 60%, transparent), color-mix(in oklch, var(--color-neutral) 60%, transparent));
    border: 1px solid color-mix(in oklch, var(--color-base-100) 8%, transparent);
    box-shadow: 0 4px 16px color-mix(in oklch, var(--color-neutral) 25%, transparent);
    color: color-mix(in oklch, var(--color-base-100) 90%, transparent);
}