/* Glass material — a frosted, translucent finish that composes with ANY color
   theme and structure. Driven by html[data-material='glass']; the default
   'solid' is a pure no-op, so every existing palette/structure is untouched.
   All values derive from the active role tokens via color-mix, so the frost
   adapts to each palette and to light/dark. Loaded last (after color +
   structure) so its --elevation / body overrides win on source order. */

[data-material='glass'] {
    /* Translucent surfaces (new tokens — never self-reference a role token) */
    --glass-surface: color-mix(in srgb, var(--surface-container-high) 70%, transparent);
    --glass-surface-strong: color-mix(
        in srgb,
        var(--surface-container-lowest) 80%,
        transparent
    );
    --glass-stroke: color-mix(in srgb, white 45%, transparent);
    --glass-blur: blur(14px) saturate(1.3);

    /* Soft, diffuse glows replace the tight default shadows */
    --elevation-0: none;
    --elevation-1: 0 0.25rem 0.75rem 0
        color-mix(in srgb, var(--shadow) 10%, transparent);
    --elevation-2: 0 0.375rem 1rem 0
        color-mix(in srgb, var(--shadow) 12%, transparent);
    --elevation-3: 0 0.75rem 1.75rem 0
        color-mix(in srgb, var(--shadow) 16%, transparent);
    --elevation-4: 0 1rem 2.5rem 0
        color-mix(in srgb, var(--shadow) 20%, transparent);
    --elevation-5: 0 1.5rem 3.5rem 0
        color-mix(in srgb, var(--shadow) 24%, transparent);
}

@media (prefers-color-scheme: dark) {
    [data-material='glass'] {
        --glass-surface: color-mix(
            in srgb,
            var(--surface-container-high) 60%,
            transparent
        );
        --glass-surface-strong: color-mix(
            in srgb,
            var(--surface-container-lowest) 70%,
            transparent
        );
        --glass-stroke: color-mix(in srgb, white 14%, transparent);
    }
}

/* Palette-derived gradient backdrop so the frosted panels have something to
   blur. Soft mesh from the active accents; adapts to palette + mode. */
[data-material='glass'] body {
    background:
        radial-gradient(
            at 18% 12%,
            color-mix(in srgb, var(--primary) 32%, transparent),
            transparent 45%
        ),
        radial-gradient(
            at 85% 8%,
            color-mix(in srgb, var(--tertiary) 28%, transparent),
            transparent 48%
        ),
        radial-gradient(
            at 50% 100%,
            color-mix(in srgb, var(--secondary) 22%, transparent),
            transparent 55%
        ),
        var(--background);
    background-attachment: fixed;
}

/* Frosted panels — translucent surface + hairline stroke + backdrop blur. */
[data-material='glass'] .card,
[data-material='glass'] .navbar,
[data-material='glass'] .sidebar,
[data-material='glass'] .popover,
[data-material='glass'] .context-menu,
[data-material='glass'] .hover-card,
[data-material='glass'] .toast {
    background: var(--glass-surface);
    border-color: var(--glass-stroke);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

/* Dialogs / drawers / floating listboxes — a touch more opaque for legibility. */
[data-material='glass'] .modal,
[data-material='glass'] .drawer,
[data-material='glass'] .command-palette,
[data-material='glass'] .combobox__listbox {
    background: var(--glass-surface-strong);
    border-color: var(--glass-stroke);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

/* Keep the tonal card variants meaningful — frost their own fills. */
[data-material='glass'] .card--ink {
    background: color-mix(in srgb, var(--inverse-surface) 72%, transparent);
}
[data-material='glass'] .card--accent {
    background: color-mix(in srgb, var(--primary-container) 72%, transparent);
}