@tailwind base;
@tailwind components;
@tailwind utilities;

/* -------------------------------------------------
   Warm‑minimal design tokens (dark theme)
   ------------------------------------------------- */
:root {
  --color-primary: #ff6b6b;          /* warm accent */
  --color-surface: #0b0814;          /* near‑black page */
  --color-surface-1: #14121a;        /* slightly lighter card */
  --color-muted: #a0a0a8;            /* body text */
  --radius-sm: 0.375rem;             /* 6px */
  --radius-md: 0.5rem;               /* 8px */
  --radius-lg: 0.75rem;              /* 12px */
  --space-1: 0.25rem;                /* 4px */
  --space-2: 0.5rem;                 /* 8px */
  --space-3: 0.75rem;                /* 12px */
  --space-4: 1rem;                   /* 16px */
  --space-5: 1.5rem;                 /* 24px */
  --space-6: 2rem;                   /* 32px */
}

/* -------------------------------------------------
   Base typography
   ------------------------------------------------- */
html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--color-muted);
  background-color: var(--color-surface);
  line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
  color: #fff;
  line-height: 1.2;
}
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 600; }

/* -------------------------------------------------
   Utility components
   ------------------------------------------------- */
.glass-card {
  @apply bg-surface-1/60 backdrop-blur-md border border-white/10 rounded-lg p-6;
}
.btn-primary {
  @apply bg-primary text-white font-medium rounded-md px-4 py-2 transition-colors;
  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary;
}
.btn-primary:hover { background-color: #e05555; }
.btn-primary:disabled { @apply opacity-50 cursor-not-allowed; }

.input-base {
  @apply w-full rounded-md border border-white/20 bg-surface-1/50 px-3 py-2 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary;
}
.input-base:focus { @apply border-primary; }

.form-field {
  @apply mb-4;
}
.form-field label {
  @apply block text-sm font-medium text-gray-200 mb-1;
}
.error-text {
  @apply text-sm text-red-400 mt-1;
}

.badge-live {
  @apply inline-block bg-red-600 text-xs px-2 py-0.5 rounded-full;
}
.glass-viewers {
  @apply text-xs text-gray-300;
}

/* -------------------------------------------------
   Scroll wave animation (kept from original)
   ------------------------------------------------- */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-50%); }
}
.animate-bounce {
  animation: bounce 1s infinite ease-in-out;
}

/* -------------------------------------------------
   Adjust layout spacing for the auth pages
   ------------------------------------------------- */
.auth-container {
  @apply flex min-h-screen;
}
.auth-main {
  @apply flex-1 flex items-center justify-center p-6 lg:p-12;
}
.auth-section {
  @apply w-full max-w-md glass-card;
}