/* Glass-Aurora Design System — globale Tokens, gilt für beide Cluster
   Quelle: docs/superpowers/specs/2026-05-05-glass-aurora-redesign-design.md § 3.1 */

:root {
  /* Glass-Cards */
  --glass-bg-light: rgba(255, 255, 255, 0.55);     /* auf Cream-Hintergrund */
  --glass-bg-dark: rgba(15, 33, 24, 0.55);          /* auf Foto-Hintergrund */
  --glass-blur: 20px;
  --glass-blur-strong: 28px;
  --glass-border-light: rgba(216, 210, 194, 0.6);
  --glass-border-dark: rgba(255, 255, 255, 0.25);

  /* Layered Shadows — drei Stufen */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.05), 0 8px 28px rgba(38, 77, 50, 0.08);
  --shadow-card-hover: 0 1px 3px rgba(0,0,0,0.06), 0 16px 48px rgba(38, 77, 50, 0.18);
  --shadow-glass-floating: 0 16px 48px rgba(0, 0, 0, 0.35);

  /* Aurora-Drift Animation */
  --aurora-duration: 18s;

  /* Grain-Overlay als Daten-URI */
  --grain-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="n"><feTurbulence baseFrequency="0.85" numOctaves="3"/></filter><rect width="100" height="100" filter="url(%23n)" opacity="0.4"/></svg>');
}

@keyframes aurora-drift {
  from { transform: translate(0, 0); }
  to { transform: translate(-2%, -1%); }
}