/* ============================================================
   Base Styles & CSS Variables
   ============================================================ */

:root {
  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F4F3;
  --color-text: #1A1A1A;
  --color-text-muted: #6B7280;
  --color-green: #69B24C;
  --color-green-hover: #5A9E40;
  --color-link: #E85D4A;
  --color-link-hover: #D14A38;
  --color-border: #E5E7EB;
  --color-shadow: rgba(0, 0, 0, 0.06);

  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;

  --radius: 8px;
  --max-width: 800px;
}

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

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg-alt);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--color-link-hover);
}

.gate.is-hidden,
.portal.is-hidden,
.auth-gate.is-hidden,
.modal-overlay.is-hidden,
.is-hidden {
  display: none;
}