/* ============================================================
   decoding.vin — design system
   Dark data-infra. Archivo + JetBrains Mono. Electric blue accent.
   ============================================================ */

:root {
  /* ===== LIGHT THEME (default) ===== */
  /* base surfaces */
  --bg:          #f4f5f8;
  --bg-1:        #ffffff;
  --bg-2:        #f8f9fb;
  --surface:     #ffffff;
  --surface-2:   #f5f6f9;
  --elevated:    #ffffff;

  /* lines */
  --line:        rgba(16, 23, 34, 0.10);
  --line-2:      rgba(16, 23, 34, 0.15);
  --line-strong: rgba(16, 23, 34, 0.26);

  /* text */
  --text:        #101722;
  --text-2:      #3b4452;
  --text-3:      #69727f;
  --text-4:      #98a0ac;

  /* accent — electric blue */
  --acc:         #3b6fe0;
  --acc-bright:  #2f5fd0;
  --acc-dim:     #aebfee;
  --acc-glow:    rgba(59, 111, 224, 0.26);
  --acc-wash:    rgba(59, 111, 224, 0.07);

  /* signal */
  --ok:          #1f9d6b;
  --ok-dim:      rgba(31, 157, 107, 0.12);
  --warn:        #c2810f;
  --bad:         #cf4329;
  --bad-dim:     rgba(207, 67, 41, 0.10);

  /* VIN segment hues (readable on white) */
  --seg-wmi:     #2f5fd0;
  --seg-vds:     #6b54d8;
  --seg-check:   #1f9d6b;
  --seg-year:    #c2810f;
  --seg-plant:   #b94d8e;
  --seg-serial:  #7b8390;

  /* neutral fills + chrome */
  --fill-subtle: rgba(16, 23, 34, 0.022);
  --fill-1:      rgba(16, 23, 34, 0.035);
  --fill-2:      rgba(16, 23, 34, 0.065);
  --inset-hi:    rgba(255, 255, 255, 0.7);
  --shadow-card: 0 1px 2px rgba(16,23,34,0.05), 0 18px 44px -22px rgba(16,23,34,0.22);
  --nav-bg:      rgba(255, 255, 255, 0.78);
  --brand-bar:   rgba(255, 255, 255, 0.92);

  --maxw: 1200px;
  --radius: 4px;
  --radius-lg: 8px;

  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Archivo", system-ui, -apple-system, sans-serif;
}

html[data-theme="dark"] {
  /* ===== DARK THEME ===== */
  --bg:          #080b11;
  --bg-1:        #0a0e15;
  --bg-2:        #0e131c;
  --surface:     #11161f;
  --surface-2:   #161c27;
  --elevated:    #1b2230;

  --line:        rgba(232, 230, 225, 0.08);
  --line-2:      rgba(232, 230, 225, 0.14);
  --line-strong: rgba(232, 230, 225, 0.22);

  --text:        #e8e6e1;
  --text-2:      #aab2c0;
  --text-3:      #6c7686;
  --text-4:      #495162;

  --acc:         #3b6fe0;
  --acc-bright:  #5b8cff;
  --acc-dim:     #2b4fa0;
  --acc-glow:    rgba(59, 111, 224, 0.35);
  --acc-wash:    rgba(59, 111, 224, 0.10);

  --ok:          #3fb98a;
  --ok-dim:      rgba(63, 185, 138, 0.14);
  --warn:        #e0a13b;
  --bad:         #e0563b;
  --bad-dim:     rgba(224, 86, 59, 0.14);

  --seg-wmi:     #5b8cff;
  --seg-vds:     #8b7ff0;
  --seg-check:   #3fb98a;
  --seg-year:    #e0a13b;
  --seg-plant:   #d96fb0;
  --seg-serial:  #6c7686;

  --fill-subtle: rgba(255, 255, 255, 0.015);
  --fill-1:      rgba(255, 255, 255, 0.02);
  --fill-2:      rgba(255, 255, 255, 0.05);
  --inset-hi:    rgba(255, 255, 255, 0.05);
  --shadow-card: 0 30px 80px -40px rgba(0,0,0,0.9);
  --nav-bg:      rgba(8, 11, 17, 0.72);
  --brand-bar:   rgba(255, 255, 255, 0.85);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--acc-glow); color: #fff; }

a { color: inherit; text-decoration: none; }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.wrap-wide { max-width: 1360px; margin: 0 auto; padding: 0 32px; }

section { position: relative; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before {
  content: "";
  width: 16px; height: 1px;
  background: var(--acc);
}

h1, h2, h3 { font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }

.h-display {
  font-size: clamp(38px, 5.6vw, 72px);
  font-weight: 640;
  letter-spacing: -0.04em;
  line-height: 0.98;
}
.h-section {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 620;
  letter-spacing: -0.035em;
}
.lead {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--text-2);
  line-height: 1.5;
  max-width: 56ch;
}
.mono { font-family: var(--mono); }
.txt-2 { color: var(--text-2); }
.txt-3 { color: var(--text-3); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: 14px; font-weight: 540;
  letter-spacing: -0.01em;
  padding: 11px 18px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  white-space: nowrap;
}
.btn-primary {
  background-color: var(--acc);
  color: #fff;
  border-color: var(--acc-bright);
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 6px 20px -8px var(--acc-glow);
}
.btn-primary:hover { background-color: var(--acc-bright); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 10px 28px -8px var(--acc-glow); }
.btn-ghost {
  background-color: var(--fill-1);
  color: var(--text);
  border-color: var(--line-2);
}
.btn-ghost:hover { border-color: var(--line-strong); background-color: var(--fill-2); }
.btn-sm { padding: 8px 13px; font-size: 13px; }

/* ---------- chips / badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--text-2);
  padding: 5px 10px;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  background: var(--fill-subtle);
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok); }
.dot.live { animation: pulse 2.4s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(63,185,138,0.5); }
  70% { box-shadow: 0 0 0 7px rgba(63,185,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,185,138,0); }
}

/* ---------- card ---------- */
.card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* ---------- hairline grid bg ---------- */
.grid-bg {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ---------- section divider ---------- */
.rule { height: 1px; background: var(--line); border: 0; }

/* ---------- utility ---------- */
.mono-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.num-tab { font-variant-numeric: tabular-nums; }

/* nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
}
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: 13.5px; color: var(--text-2); transition: color .15s; white-space: nowrap; }
.nav-links a:hover { color: var(--text); }

.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 5px;
  background: var(--acc);
  position: relative; overflow: hidden;
  box-shadow: 0 0 0 1px var(--acc-bright) inset, 0 4px 14px -4px var(--acc-glow);
}
.brand-mark::before, .brand-mark::after {
  content: ""; position: absolute; background: var(--brand-bar);
}
.brand-mark::before { left: 7px; top: 5px; width: 2px; height: 16px; }
.brand-mark::after { left: 13px; top: 5px; width: 2px; height: 16px; transform: skewX(-16deg); }
.brand-name { font-weight: 640; letter-spacing: -0.02em; font-size: 16px; }
.brand-name .tld { color: var(--acc-bright); }

@media (max-width: 820px) {
  .nav-links { display: none; }
  .wrap, .wrap-wide { padding: 0 20px; }
}