@import "tailwindcss";

@theme {
  --color-brand-blue: #0B2B5E;
  --color-brand-red: #E52B38;
  --color-brand-light: #F0F4F8;
  --font-sans: "Outfit", sans-serif;
}

@layer base {
  body {
    background-color: var(--color-brand-light);
    font-family: var(--font-sans);
    color: #1f2937;
  }
}

.glass-panel {
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
}

@layer utilities {
  .energy-line {
    background-size: 200% 100%;
    animation: flowLine 2s linear infinite;
  }
  @keyframes flowLine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
}