/* ============================================
   Glass Utility System (Shared)
   Apple-style frosted glass / glassmorphism.
   Apply .glass + a tint variant for colored glass.
   ============================================ */

/* Base glass — neutral frosted white */
.glass {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Tint variants — colored glass */
.glass--primary {
    background: color-mix(in srgb, var(--brand-primary) 18%, rgba(255, 255, 255, 0.5));
    border-color: color-mix(in srgb, var(--brand-primary) 20%, rgba(255, 255, 255, 0.3));
}

.glass--success {
    background: color-mix(in srgb, var(--color-success) 18%, rgba(255, 255, 255, 0.5));
    border-color: color-mix(in srgb, var(--color-success) 20%, rgba(255, 255, 255, 0.3));
}

.glass--highlight {
    background: color-mix(in srgb, var(--brand-highlight) 18%, rgba(255, 255, 255, 0.5));
    border-color: color-mix(in srgb, var(--brand-highlight) 20%, rgba(255, 255, 255, 0.3));
}

/* Bold glass — deeper color saturation for hero/feature cards */
.glass--bold {
    background: color-mix(in srgb, var(--brand-primary) 75%, rgba(255, 255, 255, 0.25));
    border-color: color-mix(in srgb, var(--brand-primary) 30%, rgba(255, 255, 255, 0.2));
    color: #fff;
    box-shadow:
        0 8px 32px color-mix(in srgb, var(--brand-primary) 25%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Hover enhancement for interactive glass elements */
.glass:hover {
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.glass--bold:hover {
    box-shadow:
        0 12px 40px color-mix(in srgb, var(--brand-primary) 30%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}