/* ============================================
   base.css — CSS variables, reset, shared styles
   Warraq · Anthropic brand aesthetic
   ============================================ */

:root {
  --font-heading: "Poppins", Arial, sans-serif;
  --font-body: "Lora", Georgia, serif;
  --color-text-primary: #141413;
  --color-text-secondary: #b0aea5;
  --color-background-primary: #faf9f5;
  --color-background-secondary: #e8e6dc;
  --color-border-secondary: #b0aea5;
  --color-border-tertiary: #e8e6dc;
  --border-radius-md: 6px;
  --border-radius-lg: 12px;
  --anthropic-orange: #d97757;
  --anthropic-blue: #6a9bcc;
  --anthropic-green: #788c5d;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

body {
  font-family: var(--font-body);
  background: #e8e6dc;
  min-height: 100vh;
  color: var(--color-text-primary);
}

.app {
  padding: 2rem 1rem;
  max-width: 720px;
  margin: 0 auto;
}

.hidden {
  display: none !important;
}

/* Shared typography */
.home-title {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--color-text-primary);
  margin-bottom: 4px;
  text-align: center;
}

.home-subtitle {
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: 2rem;
}