:root {
  /* ── Local Break — light theme (default) ──────────── */
  --lb-bg:          #FBF6EC;
  --lb-bg-raised:   #FFFFFF;
  --lb-bg-inset:    #F4EEDF;
  --lb-surface:     #FFFFFF;
  --lb-surface-2:   #F4EEDF;
  --lb-hairline:    rgba(35, 22, 10, 0.10);
  --lb-hairline-2:  rgba(35, 22, 10, 0.18);
  --lb-ink:         #1A0F06;
  --lb-ink-80:      rgba(26, 15, 6, 0.82);
  --lb-ink-60:      rgba(26, 15, 6, 0.62);
  --lb-ink-40:      rgba(26, 15, 6, 0.42);
  --lb-ink-20:      rgba(26, 15, 6, 0.20);

  /* ── Accents ──────────────────────────────────────── */
  --lb-ember:       #FF7A1C;
  --lb-ember-deep:  #D44A0A;
  --lb-ember-soft:  rgba(255, 122, 28, 0.20);
  --lb-ember-glow:  rgba(255, 122, 28, 0.65);
  --lb-amber:       #FFC23A;
  --lb-amber-soft:  rgba(255, 194, 58, 0.22);
  --lb-brand-paper: #F8D1AD;
  --lb-brand-paper-deep: #F2B680;
  --lb-brand-shadow: rgba(26, 15, 6, 0.86);

  /* ── Quality buckets ──────────────────────────────── */
  --lb-great:       #2E9D5E;
  --lb-great-soft:  rgba(46, 157, 94, 0.18);
  --lb-fire:        #FF7A1C;
  --lb-fire-soft:   rgba(255, 122, 28, 0.20);
  --lb-good:        #1AB6A4;
  --lb-good-soft:   rgba(26, 182, 164, 0.20);
  --lb-fair:        #E8A21F;
  --lb-fair-soft:   rgba(232, 162, 31, 0.22);
  --lb-skip:        #8A7C68;
  --lb-skip-soft:   rgba(138, 124, 104, 0.18);
  --lb-bad:         #E83A3A;
  --lb-bad-soft:    rgba(232, 58, 58, 0.20);

  /* dark text used on color chips */
  --lb-on-accent:   #0d0805;

  /* ── Typography ───────────────────────────────────── */
  --lb-font-serif: "Satoshi", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --lb-font-sans:  "Satoshi", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --lb-font-mono:  "Satoshi", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* ── Radii ────────────────────────────────────────── */
  --lb-rad-sm:   8px;
  --lb-rad-md:   12px;
  --lb-rad-lg:   16px;
  --lb-rad-xl:   22px;
  --lb-rad-pill: 9999px;

  /* ── Legacy token aliases (mapped to LB system) ───── */
  --bg-page:        var(--lb-bg);
  --bg-deep:        var(--lb-bg-inset);
  --panel:          var(--lb-bg-raised);
  --line:           var(--lb-hairline);
  --line-strong:    var(--lb-hairline-2);

  --navy:           var(--lb-ink);
  --accent:         var(--lb-ember);
  --accent-soft:    var(--lb-ember-soft);

  --text:           var(--lb-ink);
  --text-secondary: var(--lb-ink-60);
  --text-tertiary:  var(--lb-ink-40);

  /* ── Condition quality (kept for legacy mappings) ── */
  --cond-flat:      var(--lb-bad);
  --cond-poor:      var(--lb-bad);
  --cond-mediocre:  var(--lb-fair);
  --cond-decent:    var(--lb-good);
  --cond-solid:     var(--lb-fire);
  --cond-firing:    var(--lb-fire);

  --rank-warm: var(--lb-bad-soft);
  --rank-sand: var(--lb-fair-soft);
  --rank-cool: var(--lb-good-soft);
  --rank-foam: var(--lb-ember-soft);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--lb-ink);
  font-family: var(--lb-font-sans);
  background: var(--lb-bg);
}

body.auth-locked { overflow: hidden; }

.app-shell {
  max-width: 430px;
  margin: 0 auto;
  padding: 1rem 1rem 6rem;
  background: var(--lb-bg);
  color: var(--lb-ink);
}
.top-hero-card {
  position: relative;
  margin-bottom: 0.75rem;
  padding: 1rem 0.95rem 0.95rem;
  border: 1px solid var(--lb-hairline);
  border-radius: var(--lb-rad-lg);
  background: var(--lb-bg-raised);
  color: var(--lb-ink);
  box-shadow: 0 1px 0 var(--lb-hairline);
}
.top-bar {
  margin-bottom: 0.85rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: flex-start;
}
.top-bar-copy {
  display: grid;
  align-content: center;
  gap: 0.2rem;
  min-width: 0;
}
.eyebrow {
  margin: 0;
  color: var(--lb-ink-60);
  font-family: var(--lb-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.62rem;
  font-weight: 500;
}
h1 {
  margin: 0.02rem 0 0;
  font-family: var(--lb-font-serif);
  font-size: clamp(1.5rem, 6.5vw, 1.95rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--lb-ink);
}

.made-in-copy {
  margin: 0.22rem 0 0;
  font-family: var(--lb-font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lb-ink-60);
}