/* ============================================================
   El Dude Brothers — shared tokens
   Change these to match your logo / brand colours.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;1,700&display=swap');

:root {
  --navy: #1b1b1b;        /* main brand colour (logo black) */
  --navy-2: #383838;
  --chalk: #f6f5f0;       /* page background */
  --paper: #ffffff;
  --ink: #18202f;         /* body text */
  --muted: #5b6475;
  --line: #dcdfe5;
  --pitch: #2e7d4f;       /* confirmed / success */
  --pitch-tint: #e3f1e8;
  --amber: #f2b33d;       /* selected / floodlight accent */
  --amber-tint: #fdf1d8;
  --red: #c0392b;
  --red-tint: #fbe9e7;
  --radius-s: 6px;
  --radius-m: 10px;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--chalk); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; font-style: italic; line-height: 1.1; margin: 0; letter-spacing: .01em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius-s); padding: .55em 1em; font-weight: 600; line-height: 1.2; text-decoration: none; }
.btn:hover { border-color: var(--navy); }
.btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-primary:hover { background: var(--navy-2); }
.btn-go { background: var(--pitch); color: #fff; border-color: var(--pitch); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.field { display: grid; gap: .3rem; }
.field > span { font-size: .875rem; font-weight: 600; color: var(--muted); }
.input, .field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius-s);
  padding: .6em .75em; min-height: 44px;
}
.field textarea { min-height: 80px; resize: vertical; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); outline: none; box-shadow: 0 0 0 3px rgba(20,33,61,.15); }

.check { display: grid; grid-template-columns: 22px 1fr; gap: .6rem; align-items: start; font-size: .925rem; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--navy); }

.notice { padding: .75rem 1rem; border-radius: var(--radius-s); background: var(--amber-tint); font-size: .925rem; }
.notice.error { background: var(--red-tint); color: var(--red); }

.logo { display: flex; align-items: center; gap: .6rem; }
.logo img { height: 40px; width: auto; display: block; }
.logo .wordmark { font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }