/*
  Sierra Supply Run — the visual foundation.

  Borrowed from the design handoff's "Modernist" system (.maven/scope/design-v0.1/_ds):
  Archivo, square corners, warm greys, one red accent used sparingly. Dark mode is ours —
  the handoff has none — derived from the shopper app's dark ground.

  Semantic tokens (--ground, --card, --ink…) switch with the theme, so markup that uses
  them (bg-card, text-ink, border-line) needs no `dark:` twin. Older markup still uses
  stone-* with dark: variants; the Tailwind config maps stone onto the same greys.

  Text size: every Tailwind size and spacing is in rem, so the large-text toggle only has
  to change the root font size and the whole page — type, buttons, gaps — scales together.
*/

:root {
  --ground: #f3f2f2;
  --card: #ffffff;
  --surface: #eae9e9;
  --ink: #201e1d;
  --muted: #605d5d;
  --line: #d7d3d3;
  --line-strong: #9b9797;
  --accent: #ec3013;
  --accent-ink: #ae1800;      /* small red text on light ground (contrast) */
  --accent-soft: #fff2ef;
  --ok: #1f7a3a;
  --ok-soft: #e7f4ea;
  --warn: #8a5a00;
  --warn-soft: #fff4d6;
  --bar: #201e1d;             /* header + bottom bar: ink in both themes */
  --bar-ink: #f3f2f2;
  color-scheme: light;
}

html.dark {
  --ground: #181716;
  --card: #232120;
  --surface: #2d2b2b;
  --ink: #f3f2f2;
  --muted: #bab6b6;
  --line: #444141;
  --line-strong: #7d7979;
  --accent: #ff563c;
  --accent-ink: #ff9783;
  --accent-soft: #3a1710;
  --ok: #7fd49a;
  --ok-soft: #173322;
  --warn: #ffd27a;
  --warn-soft: #3a2c0c;
  --bar: #0f0e0e;
  --bar-ink: #f3f2f2;
  color-scheme: dark;
}

/* 17px base: a notch above the browser default for the older crowd. Large = 20px. */
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; }
html.large-font { font-size: 125%; }

body {
  font-family: "Archivo", system-ui, sans-serif;
  background: var(--ground);
  color: var(--ink);
  line-height: 1.55;
}

/* `body` prefix: Tailwind's CDN preflight is injected after this file and resets bare h1–h4. */
body h1, body h2, body h3, body h4 { font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; }

[x-cloak] { display: none !important; }

/* Focus is always visible — keyboard users and anyone who loses their place. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Touch targets: fields and buttons are never smaller than 44px tall. */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
select, textarea { min-height: 2.75rem; font-size: 1rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .625rem 1.25rem;
  font-weight: 700; font-size: 1rem; line-height: 1.2;
  border: 2px solid transparent; transition: background-color .15s, border-color .15s, color .15s;
  text-decoration: none; cursor: pointer;
}
.btn-primary { background: #d4290f; color: #fff; }   /* a shade under the brand red so white text clears 4.5:1 */
.btn-primary:hover { background: #ae1800; }
.btn-primary:active { background: #7c1405; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--surface); }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled=true] { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* Header / bottom-bar icon buttons */
.bar-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  min-width: 2.75rem; min-height: 2.75rem; padding: 0 .5rem;
  color: var(--bar-ink); font-weight: 700;
}
.bar-btn:hover { background: rgba(255,255,255,.08); }

/* Bottom tab bar (phones). Body gets room so the bar never covers content. */
.tabbar { padding-bottom: env(safe-area-inset-bottom); }
.tabbar a { min-height: 3.75rem; }
@media (max-width: 767px) { body.has-tabbar { padding-bottom: calc(3.75rem + env(safe-area-inset-bottom)); } }

.label-caps { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

/* Horizontal scrollers without a visible scrollbar */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Form fields — one style everywhere. Labels sit above, bold, never placeholder-only. */
.field { display: block; width: 100%; padding: .5rem .75rem; background: var(--card); color: var(--ink); border: 2px solid var(--line-strong); }
.field:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 2px var(--accent); }
.field-label { display: block; font-weight: 700; margin-bottom: .25rem; }
.field-hint { display: block; font-size: .875rem; color: var(--muted); margin-top: .25rem; }