:root {
  --color-bg: #F8F7F1;
  --color-card: #fff;
  --color-primary: #000;
  --color-accent: #01322B;
  --color-focus: #396F64;
  --color-text: #000;
  --color-muted: #666;
  --color-border: #ddd;
  --color-error: #d32f2f;
  --color-success: #2f855a;
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --shadow: 0 2px 8px rgba(0,0,0,0.1);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
  --gap: 12px;
}

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

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  min-height: 100vh;
  overflow-x: hidden;
}

input, select, textarea {
  width: 100%;
  padding: var(--gap);
  border: 1px solid var(--color-border);
  font-size: 16px;
  font-family: var(--font-body);
  background: var(--color-card);
}

input:not([type="checkbox"]):not([type="radio"]),
select, textarea {
  -webkit-appearance: none;
  appearance: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-focus);
}

textarea { resize: vertical; }

.btn {
  background: var(--color-primary);
  color: #fff;
  padding: 14px 28px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-body);
  transition: background-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover { background: var(--color-accent); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-full { width: 100%; }

.error {
  background: #ffe6e6;
  color: var(--color-error);
  border: 1px solid var(--color-error);
}

@media (min-width: 600px) {
  :root { --gap: 16px; }
}