@import "tailwindcss";
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700,0..1&display=swap");

:root {
  --primary: #8c2bee;
  --background-light: #f7f6f8;
  --background-dark: #0d0614;
}

.glass {
  background: rgba(140, 43, 238, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(140, 43, 238, 0.1);
}

.dark .glass {
  background: rgba(140, 43, 238, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(140, 43, 238, 0.1);
}

.glass-dark {
  background: rgba(20, 10, 30, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(140, 43, 238, 0.2);
}

.text-gradient {
  background: linear-gradient(135deg, #8c2bee 0%, #d4a5ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body {
  min-height: max(884px, 100dvh);
}