/* variables.css — CSS custom properties + global reset */

:root {
  /* Warm-dark surfaces (Claude-style) */
  --bg: #1f1e1d;
  --bg2: #262624;
  --bg3: #30302e;

  /* Terracotta accent (kept under legacy names --gold/--gold2/--amber) */
  --gold: #d97757;
  --gold2: #e79b80;
  --amber: #cb4d2e;

  /* Warm neutral text */
  --text: #f5f4ee;
  --text-dim: #c5c1b6;
  --text-muted: #918d81;

  /* Hairline borders + accent tint */
  --border: rgba(255,255,255,0.10);
  --border-bright: rgba(255,255,255,0.20);
  --glow: rgba(217,119,87,0.10);

  /* Typography — serif for display, sans for UI (Claude pairing) */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Hero legibility — white text sits on a dark scrim in every theme */
  --hero-scrim-rgb: 8, 9, 12;
  --hero-text-shadow: 0 1px 8px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.6);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  overflow: hidden;
}

/* Noise texture overlay */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 9999; opacity: 0.25;
}

/* Warm ambient glow bg */
body::after {
  content: '';
  position: fixed;
  bottom: -20%; left: 50%; transform: translateX(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(ellipse, rgba(217,119,87,0.05) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
  animation: flicker 4s ease-in-out infinite;
}

@keyframes flicker {
  0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.7; transform: translateX(-50%) scale(0.97); }
  75% { opacity: 0.85; transform: translateX(-50%) scale(1.02); }
}