/* 2 Wheels Namibia — shared design tokens & primitives */
@font-face { font-family: 'Archivo'; src: url('../fonts/archivo-latin-standard-normal.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('../fonts/archivo-latin-standard-italic.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope-latin-wght-normal.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }

:root {
  /* Logo colours */
  --lime: #ABF614;
  --lime-600: #8fd400;
  --lime-700: #5f8f00;
  --lime-50: #f4fde0;
  --ink: #0b0b0b;
  --asphalt: #131313;
  --asphalt-2: #1c1c1b;
  --asphalt-3: #2a2a28;
  --bone: #f3f3ee;
  --paper: #ffffff;
  --line: #e3e3dc;
  --muted: #6e6e68;
  --muted-2: #9a9a93;
  --danger: #e5484d;
  --warn: #f2a516;
  --ok: #3fae2a;
  --info: #3b82f6;

  --f-display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --f-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px -12px rgba(0,0,0,.18);
  --ease: cubic-bezier(.2,.8,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--f-body); color: var(--ink); background: var(--bone); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--lime); color: var(--ink); }

.display { font-family: var(--f-display); font-stretch: 125%; font-weight: 900; font-style: italic; letter-spacing: -.01em; line-height: .92; text-transform: uppercase; }
.mono { font-family: var(--f-mono); }
.eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ''; width: 18px; height: 6px; background: var(--lime); transform: skewX(-24deg); }
.lime { color: var(--lime); }

/* Buttons */
.btn { --bg: var(--ink); --fg: #fff; appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px; border-radius: 10px; background: var(--bg); color: var(--fg); font-family: var(--f-display); font-stretch: 112%; font-weight: 800; font-size: 14px;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s, background .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-lime { --bg: var(--lime); --fg: var(--ink); box-shadow: 0 10px 30px -12px rgba(171,246,20,.7); }
.btn-lime:hover { box-shadow: 0 14px 34px -10px rgba(171,246,20,.85); }
.btn-ghost { --bg: transparent; --fg: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-light { --bg: #fff; --fg: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-danger { --bg: #fff; --fg: var(--danger); box-shadow: inset 0 0 0 1.5px #f3c2c4; }
.btn-sm { padding: 9px 14px; font-size: 12px; border-radius: 8px; }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* Forms */
.field { display: grid; gap: 7px; }
.field > span, .label { font-size: 13px; font-weight: 700; color: #2b2b28; }
.field > span em { color: var(--danger); font-style: normal; }
.field small { color: var(--muted); font-size: 12px; }
.input, .field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-size: 15px; outline: none; transition: border .15s, box-shadow .15s;
}
.field textarea { min-height: 110px; resize: vertical; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(171,246,20,.45); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

/* Toast */
.toasts { position: fixed; z-index: 9999; right: 18px; bottom: 18px; display: grid; gap: 10px; max-width: min(420px, calc(100vw - 36px)); }
.toast { background: var(--ink); color: #fff; padding: 14px 16px 14px 18px; border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.5); font-size: 14px; border-left: 5px solid var(--lime);
  animation: toastIn .35s var(--ease); }
.toast.err { border-left-color: var(--danger); }
@keyframes toastIn { from { transform: translateY(14px); opacity: 0; } }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 700 11px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; background: #eee; color: #333; white-space: nowrap; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok { background: #e6f7df; color: #2d7d1d; }
.badge.warn { background: #fff3d6; color: #9a6200; }
.badge.bad { background: #fde7e8; color: #c12f35; }
.badge.info { background: #e6effe; color: #2759b8; }
.badge.lime { background: var(--lime); color: var(--ink); }
.badge.dark { background: var(--ink); color: var(--lime); }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}