/* ============================================================================
   Paper-Pixels design system  —  billgavin.com
   Source of truth. Vendored into smart-van via scripts/sync-design-system.sh.

   Aesthetic: v3x3d "Paper Pixels" — cardboard/paper texture, soft muted earth
   tones with pastel accents, blocky-but-warm components, pixel display font.
   Colourful, simple, fun. No heavy or flashy animation (R15).
   ========================================================================== */

/* ---- Pixel display font (self-hosted, no runtime dependency) ------------- */
@font-face {
  font-family: "Silkscreen";
  src: url("../fonts/silkscreen-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Silkscreen";
  src: url("../fonts/silkscreen-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Design tokens ------------------------------------------------------- */
:root {
  /* Paper / cardboard surfaces */
  --paper:     #f3e9d2;  /* page background, warm cream */
  --paper-2:   #eaddc0;  /* slightly deeper panel */
  --card:      #fbf4e2;  /* raised card face */
  --cardboard: #d8c19a;  /* kraft / tab accents */

  /* Ink */
  --ink:       #43362a;  /* primary text, dark warm brown */
  --ink-soft:  #6f5d49;  /* secondary text */
  --line:      #b59b76;  /* hairline / border brown */
  --shadow:    #2e251c;  /* hard drop shadow */

  /* Pastel earth accents (colourful but muted) */
  --terracotta: #cd7b54;
  --sage:       #8a9b62;
  --sky:        #7e9cb0;
  --mustard:    #e2b04a;
  --rose:       #cf8a8a;
  --plum:       #9a7aa0;

  /* Semantic */
  --accent:    var(--terracotta);
  --good:      var(--sage);
  --info:      var(--sky);
  --warn:      var(--mustard);

  /* Type */
  --font-display: "Silkscreen", "Courier New", ui-monospace, monospace;
  --font-body: ui-rounded, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;

  /* Geometry — blocky, no rounding */
  --border-w: 3px;
  --radius: 0px;
  --shadow-hard: 4px 4px 0 var(--shadow);
  --shadow-soft: 2px 2px 0 var(--shadow);

  /* Spacing scale (8px pixel grid) */
  --s1: 8px;  --s2: 16px;  --s3: 24px;  --s4: 32px;  --s5: 48px;  --s6: 64px;

  --maxw: 960px;
}

/* ---- Paper texture (procedural, inline SVG — no binary asset) ------------ */
/* feTurbulence fibres tinted onto the warm paper colour. Subtle. */
:root {
  --paper-texture:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.18  0 0 0 0 0.13  0 0 0 0 0.08  0 0 0 0.05 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ---- Reset & base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--paper-texture);
  background-repeat: repeat;
}

img { max-width: 100%; display: block; image-rendering: pixelated; }
a { color: var(--terracotta); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: 0.5px;
  /* Crisp pixel edges */
  -webkit-font-smoothing: none;
  font-smooth: never;
}
h1 { font-size: clamp(28px, 5vw, 46px); margin: 0 0 var(--s3); }
h2 { font-size: clamp(22px, 3.5vw, 30px); margin: 0 0 var(--s2); }
h3 { font-size: 18px; margin: 0 0 var(--s1); }

/* ---- Layout helpers ------------------------------------------------------ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s3); }
.stack > * + * { margin-top: var(--s3); }
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.grid {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* ---- Top navigation ------------------------------------------------------ */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--paper-2);
  border-bottom: var(--border-w) solid var(--ink);
  flex-wrap: wrap;
}
.nav__brand {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
}
.nav__links { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.nav__links a {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--ink-soft);
  padding: 4px 2px;
  border-bottom: 3px solid transparent;
}
.nav__links a:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--terracotta); }
.nav__links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--terracotta); }

/* ---- Card ---------------------------------------------------------------- */
.card {
  background: var(--card);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow-hard);
  padding: var(--s3);
}
.card--link { display: block; color: inherit; transition: transform 80ms steps(2), box-shadow 80ms steps(2); }
.card--link:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow); text-decoration: none; }
.card__tab {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  background: var(--cardboard);
  color: var(--ink);
  border: 3px solid var(--ink);
  padding: 3px 8px;
  margin-bottom: var(--s2);
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink);
  background: var(--mustard);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow-hard);
  padding: 12px 20px;
  cursor: pointer;
  transition: transform 60ms steps(2), box-shadow 60ms steps(2);
}
.btn:hover { text-decoration: none; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--shadow); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shadow); }
.btn--primary { background: var(--terracotta); color: var(--card); }
.btn--ghost { background: var(--card); }
.btn--lg { font-size: 16px; padding: 16px 28px; }

/* ---- Section header ------------------------------------------------------ */
.section { padding: var(--s5) 0; }
.section__head { margin-bottom: var(--s4); }
.section__kicker {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--terracotta);
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--s1);
}

/* ---- Tags / badges ------------------------------------------------------- */
.tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 10px;
  padding: 3px 7px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  margin: 2px;
}
.tag--good { background: var(--sage); color: var(--card); }
.tag--info { background: var(--sky); color: var(--card); }
.tag--warn { background: var(--mustard); }
.tag--accent { background: var(--terracotta); color: var(--card); }

/* ---- Hero band ----------------------------------------------------------- */
.hero {
  padding: var(--s6) 0;
  text-align: center;
}
.hero p.lead { font-size: clamp(18px, 2.4vw, 22px); max-width: 38ch; margin: 0 auto var(--s4); color: var(--ink-soft); }

/* ---- Footer -------------------------------------------------------------- */
.footer {
  border-top: var(--border-w) solid var(--ink);
  background: var(--paper-2);
  padding: var(--s4) 0;
  font-size: 14px;
  color: var(--ink-soft);
}

/* ---- Pixel divider ------------------------------------------------------- */
.divider {
  height: 8px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 16px);
  border: 0;
  margin: var(--s4) 0;
  opacity: 0.5;
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .nav { justify-content: center; }
  .section { padding: var(--s4) 0; }
}

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

/* ============================================================================
   Dashboard widgets  —  shared by the public demo and the van admin view.
   Render markup comes from js/ui/dashboard.js; these are the component styles.
   ========================================================================== */
.dash {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.widget { /* a .card variant for telemetry panels */ }
.widget__title {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 var(--s2);
}
.widget__big {
  font-family: var(--font-display);
  font-size: clamp(30px, 6vw, 44px);
  color: var(--ink);
  line-height: 1;
  margin-bottom: var(--s1);
  -webkit-font-smoothing: none;
}
.kv { display: flex; justify-content: space-between; gap: var(--s2); padding: 3px 0; font-size: 14px; }
.kv > span:first-child { color: var(--ink-soft); }
.stale-flag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--card);
  background: var(--mustard);
  border: 2px solid var(--ink);
  padding: 2px 6px;
  margin-top: var(--s1);
}
.empty { color: var(--ink-soft); font-style: italic; }

/* Light rows */
.light { padding: var(--s1) 0; border-top: 2px dotted var(--line); }
.light:first-child { border-top: 0; }
.light__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.light__name { font-family: var(--font-display); font-size: 12px; }
.light input[type=range] {
  width: 100%;
  margin-top: var(--s1);
  accent-color: var(--terracotta);
}

/* Camera / map frames */
.frame { width: 100%; height: 220px; border: var(--border-w) solid var(--ink); display: block; }
.placeholder {
  width: 100%; height: 220px;
  border: var(--border-w) dashed var(--line);
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--ink-soft);
  background: var(--paper-2);
  font-size: 14px;
}

/* Off-grid state (van asleep / source unreachable) */
.offgrid { text-align: center; color: var(--ink-soft); padding: var(--s2) 0; }
.offgrid__icon { font-family: var(--font-display); font-size: 13px; color: var(--mustard); display: block; margin-bottom: var(--s1); }

/* Live-sim banner for the public demo */
.simbar {
  background: var(--sage);
  color: var(--card);
  border-bottom: var(--border-w) solid var(--ink);
  text-align: center;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1px;
  padding: var(--s1) var(--s2);
}