/* Guide Education — Glass + atmospheric utilities
   DESIGN.md §2 (Glass & Gradient Rule), §4 (Ambient Shadows). */

.glass-panel {
  background-color: color-mix(in oklab, var(--color-surface-container-lowest, var(--color-surface)) 80%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
}

html.dark .glass-panel {
  background-color: color-mix(in oklab, var(--color-surface) 75%, transparent);
}

.ambient-shadow {
  box-shadow: var(--shadow-ambient);
}

.dot-grid {
  background-image: radial-gradient(var(--color-on-surface) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.05;
}

html.dark .dot-grid { opacity: 0.06; }

.hero-gradient {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-container) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}