/* ============================================================
   ACID BEAST - FurryFans Design System Core
   A cyberpunk-meets-wild aesthetic

   This file contains:
   - Design tokens (CSS variables)
   - Reset styles
   - Base typography
   - Common utility classes
   ============================================================ */

/* ==================== Design Tokens ==================== */
:root {
  /* Core Palette */
  --acid: #BEFA00;
  --acid-dim: #9ed100;
  --acid-glow: rgba(190, 250, 0, 0.5);
  --acid-muted: rgba(190, 250, 0, 0.12);

  --hot: #FF2E63;
  --hot-glow: rgba(255, 46, 99, 0.4);

  --void: #0a0a0f;
  --void-light: #12121a;
  --surface: #1a1a25;
  --surface-light: #242433;

  --text: #f0f0f5;
  --text-dim: #8888a0;
  --text-muted: #5a5a70;

  /* Typography */
  --font-display: 'Archivo Black', Impact, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background: var(--void);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

::selection {
  background: var(--acid);
  color: var(--void);
}

/* ==================== Typography ==================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.2;
  font-weight: 900;
}

a {
  color: var(--acid);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}

a:hover {
  color: var(--acid-dim);
}

/* ==================== Utility Classes ==================== */
.text-acid { color: var(--acid); }
.text-hot { color: var(--hot); }
.text-dim { color: var(--text-dim); }
.text-muted { color: var(--text-muted); }

.bg-void { background: var(--void); }
.bg-surface { background: var(--surface); }
.bg-surface-light { background: var(--surface-light); }