/* Design tokens + base reset. Loaded on every page before any other stylesheet. */

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

:root {
  --bg: #FAF7F2;
  --surface: #FFFFFF;
  --surface-hover: #F2EDE4;
  --border: rgba(20, 16, 10, 0.10);
  --border-strong: rgba(20, 16, 10, 0.18);
  --accent: #C1710B;
  --accent-grad: linear-gradient(135deg, #F2A65A, #F6C89A);
  --text: #1A1714;
  --text-muted: #6B6355;
  --success: #16A34A;
  --warning: #B45309;
  --danger: #DC2626;
  --radius: 18px;
  --radius-sm: 10px;
  --radius-pill: 9999px;
}

html[data-theme="dark"] {
  --bg: #0A0908;
  --surface: #141210;
  --surface-hover: #1B1814;
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.20);
  --accent: #E8A15E;
  --accent-grad: linear-gradient(135deg, #F2A65A, #F6C89A);
  --text: #F5F3EF;
  --text-muted: #9AA0B4;
  --success: #22C55E;
  --warning: #D97706;
  --danger: #DC2626;
}

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise 0.6s ease-out both; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--accent);
  color: #14100A;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  z-index: 100;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }