@layer base, galaxy, modal, stars;

@layer base {
  :root {
    --color-bg: #050510;
    --color-bg-card: #0f0f2e;
    --color-bg-card-alt: #12122a;
    --color-accent-purple: #c084fc;
    --color-accent-purple-dim: #7c3aed;
    --color-accent-gold: #fbbf24;
    --color-accent-gold-dim: #d97706;
    --color-text-primary: #f1f0ff;
    --color-text-secondary: #a89fc8;
    --color-text-muted: #6b648a;
    --color-border: rgba(192, 132, 252, 0.2);
    --font-display: Georgia, 'Times New Roman', serif;
    --font-body: system-ui, -apple-system, sans-serif;
    --modal-radius: 16px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --transition-fast: 150ms var(--ease-out);
    --transition-med: 300ms var(--ease-out);
    --transition-slow: 500ms var(--ease-out);
  }

  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--color-bg);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
  }

  button {
    cursor: pointer;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
  }
}