/* Explain: Layout utilities and background patterns for a modern site. - */
/* Layout utilities */
.glass-panel {
    background: color-mix(in srgb, var(--surface-color) 90%, transparent);
    backdrop-filter: blur(12px);
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
}

.bg-grid-pattern {
    background-image: 
        linear-gradient(to right, color-mix(in srgb, var(--border-color) 40%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--border-color) 40%, transparent) 1px, transparent 1px);
    background-size: 24px 24px;
}