@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Barlow:wght@400;500;600;700&display=swap');

:root {
  --bg: #191d24;
  --surface: #232833;
  --surface-2: #2b3140;
  --border: #3a4152;
  --text: #f2f3f5;
  --text-dim: #9aa1b0;
  --text-dimmer: #6b7386;
  --accent: #e8c547;
  --white-status: #f5f5f5;
  --yellow-status: #e8c547;
  --green-status: #5cb85c;
  --orange-status: #e08a2a;
  --red-status: #c0392b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Barlow', sans-serif;
}

.heading-font {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
}

.hazard-stripe {
  height: 6px;
  width: 100%;
  background: repeating-linear-gradient(135deg, var(--accent) 0 18px, var(--bg) 18px 36px);
  flex-shrink: 0;
}

a { color: var(--accent); }
a:hover { color: #f0d060; }

button, .btn {
  font-family: 'Barlow', sans-serif;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--accent);
  color: #1a1d24;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 4px;
  font-size: 13px;
}

.btn-secondary {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 10px 18px;
  border-radius: 4px;
  font-size: 13px;
}

input, textarea, select {
  font-family: 'Barlow', sans-serif;
  background: #16191f;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 12px;
  border-radius: 4px;
  font-size: 14px;
  width: 100%;
}

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

label.field-label {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dimmer);
  display: block;
  margin-bottom: 5px;
}