/* ────────────────────────────────────────────────────────────────────
   Urvarā · Shared Design System
   Extracted from the top-5 pages (index/mandal/parcel/explore/cropkb)
   so all pages share one canonical palette + topbar + button + chip +
   kv + provenance + accessibility focus-ring.
   Page-specific styles remain inline in each page.

   v1 · Track 1 extract (2026-06-29):
     - 18 :root tokens (palette + status colors)
     - Typography tokens (--font-sans / --font-serif / --font-mono)
     - Topbar (.topbar / .brand / .nav / .nav-demos / .realflag)
     - Buttons (.btn / .btn-primary / .btn-ghost — legacy .btn.ghost too)
     - Chips (.chip / .chip.id)
     - KV grid (.kv)
     - Card primitive (.uc-card + uc-eyebrow + uc-h3 + uc-body + uc-prov)
     - Provenance footer (.prov)
     - .kbox / .stamp helpers
     - Light-touch reset
     - Global :focus-visible (a11y)
     - Mobile breakpoint scale: 480 / 640 / 760 / 880 / 980
   ──────────────────────────────────────────────────────────────────── */

/* ── light-touch reset ─────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;}

/* ── design tokens (the 18 colors all 5 pages duplicate verbatim) ─── */
:root{
  /* surfaces */
  --cream:#F1EDE1;
  --paper:#FBFAF3;
  --card:#FFFFFF;

  /* greens */
  --sage:#C7D2B2;
  --sage-soft:#DEE4D0;
  --sage-line:#B4C29A;
  --forest:#33503A;
  --forest-deep:#243A29;
  --green:#4F7A52;
  --olive:#6E7A5E;
  --moss:#737A68;

  /* neutrals */
  --faint:#9AA08C;
  --line:#E0DACB;
  --line2:#D2CBB8;
  --line-strong:#D2CBB8;   /* alias of --line2, more semantic */

  /* accents */
  --terra:#B5663B;
  --terra-soft:#F0DDCD;
  --amber:#C79A3E;
  --amber-soft:#F3E7C8;
  --teal:#2E8B73;
  --purple:#7F77DD;
  --river:#2E6F9E;

  /* semantic status (matches parcel.html) */
  --good:#4F7A52;
  --warn:#C79A3E;
  --bad:#B5663B;
  --neutral:#9AA08C;

  /* typography */
  --font-sans:'Inter',system-ui,sans-serif;
  --font-serif:'Fraunces',serif;
  --font-mono:'IBM Plex Mono',monospace;
}

/* ── base typography ───────────────────────────────────────────────── */
body{
  background:var(--cream);
  color:var(--forest-deep);
  font-family:var(--font-sans);
  font-size:13px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:var(--font-mono);font-feature-settings:'tnum';}
.serif{font-family:var(--font-serif);}

/* ── global accessibility focus ring ───────────────────────────────── */
/* Visible focus indicator for keyboard users on every interactive
   element. WCAG 2.4.7 (Focus Visible) — 2px solid forest outline
   with 2px offset so it never overlaps content. */
:focus-visible{
  outline:2px solid var(--forest);
  outline-offset:2px;
}
/* preserve role-played divs */
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible{
  outline:2px solid var(--forest);
  outline-offset:2px;
}

/* ── topbar primitive ──────────────────────────────────────────────── */
.topbar{
  position:sticky;
  top:0;
  z-index:30;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.topbar .inner{
  display:flex;
  align-items:center;
  gap:22px;
  height:56px;
  padding:0 18px;
}
.brand{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:21px;
  color:var(--forest);
  display:flex;
  align-items:baseline;
  gap:6px;
}
.brand .dot{color:var(--terra);}
.brand .appname{
  font-family:var(--font-sans);
  font-weight:500;
  font-size:12px;
  letter-spacing:.05em;
  color:var(--moss);
  text-transform:uppercase;
}

/* nav links */
.nav{display:flex;gap:3px;flex-wrap:wrap;}
.nav a{
  font-size:11.5px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--moss);
  text-decoration:none;
  padding:6px 10px;
  border-radius:6px;
  font-weight:500;
  cursor:pointer;
}
.nav a:hover{color:var(--forest);}
.nav a.active{background:var(--sage-soft);color:var(--forest);}

/* nav · demos submenu */
.nav-demos{position:relative;display:inline-block;}
.nav-demos>.nav-demos-trigger{
  font-size:11.5px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--moss);
  padding:6px 10px;
  border-radius:6px;
  font-weight:500;
  cursor:pointer;
  display:inline-block;
}
.nav-demos:hover>.nav-demos-trigger{background:var(--sage-soft);color:var(--forest);}
.nav-demos-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 6px 20px rgba(36,58,41,.14);
  padding:5px;
  min-width:200px;
  z-index:40;
  flex-direction:column;
  gap:1px;
  margin-top:2px;
}
.nav-demos:hover>.nav-demos-menu{display:flex;}
.nav-demos-menu a{
  display:block;
  font-size:11.5px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--moss);
  text-decoration:none;
  padding:7px 12px;
  border-radius:5px;
  font-weight:500;
}
.nav-demos-menu a:hover{background:var(--sage-soft);color:var(--forest);}

.topright{margin-left:auto;display:flex;align-items:center;gap:12px;}

/* ── REAL / MECHANISM provenance flag ─────────────────────────────── */
.realflag{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
  color:var(--green);
  border:1px solid var(--sage);
  background:#fff;
  padding:3px 8px;
  border-radius:5px;
}
.realflag .d{color:var(--green);}

/* ── buttons ───────────────────────────────────────────────────────── */
.btn,
.btn-primary{
  display:inline-block;
  text-align:center;
  background:var(--forest);
  color:#fff;
  text-decoration:none;
  border-radius:9px;
  padding:10px 16px;
  font-size:12.5px;
  font-weight:500;
  cursor:pointer;
  border:none;
  font-family:var(--font-sans);
}
.btn:hover,
.btn-primary:hover{background:var(--forest-deep);}

/* ghost / secondary — both .btn.ghost (legacy) and .btn-ghost (new) */
.btn.ghost,
.btn-ghost,
.btn-secondary{
  background:transparent;
  color:var(--moss);
  border:1px solid var(--line2);
}
.btn.ghost:hover,
.btn-ghost:hover,
.btn-secondary:hover{
  color:var(--forest);
  background:var(--sage-soft);
}

/* ── chips ─────────────────────────────────────────────────────────── */
.chip{
  display:inline-block;
  font-size:11px;
  padding:3px 9px;
  border-radius:14px;
  border:1px solid var(--line2);
  background:var(--card);
  color:var(--moss);
}
.chip.id{
  font-family:var(--font-mono);
  letter-spacing:.04em;
  color:var(--forest);
}

/* ── KV (key/value grid) ───────────────────────────────────────────── */
.kv{
  display:grid;
  grid-template-columns:1fr auto;
  gap:7px 12px;
  font-size:12.5px;
}
.kv .k{color:var(--moss);}
.kv .v{
  color:var(--forest-deep);
  font-weight:500;
  text-align:right;
  font-family:var(--font-mono);
}

/* ── uc card primitive ─────────────────────────────────────────────── */
.uc-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px 20px;
}
.uc-eyebrow{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--moss);
  font-weight:500;
}
.uc-h3{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:17px;
  color:var(--forest-deep);
  line-height:1.25;
}
.uc-body{
  font-size:13px;
  color:var(--forest-deep);
  line-height:1.55;
}
.uc-prov{
  margin-top:12px;
  padding-top:9px;
  border-top:1px solid var(--line);
  font-size:10.5px;
  color:var(--faint);
  line-height:1.6;
}

/* ── provenance footer (legacy class) ──────────────────────────────── */
.prov{
  margin-top:14px;
  font-size:10.5px;
  color:var(--faint);
  line-height:1.6;
  border-top:1px solid var(--line);
  padding-top:9px;
}

/* ── small helpers (kbox / stamp) ──────────────────────────────────── */
.kbox{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
}
.stamp{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--moss);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:4px;
  padding:2px 7px;
}

/* ── images ────────────────────────────────────────────────────────── */
img{max-width:100%;height:auto;}

/* ── shared mobile breakpoints (cropkb-style cascade) ─────────────── */
/* small phone — 480px and below */
@media (max-width:480px){
  .topbar .inner{padding:0 12px;gap:12px;}
  .brand{font-size:18px;}
  .nav a,
  .nav-demos>.nav-demos-trigger{font-size:10.5px;padding:5px 8px;}
}

/* phone — up to 640px */
@media (max-width:640px){
  .topbar .inner{height:auto;min-height:56px;flex-wrap:wrap;padding:8px 14px;}
  .nav{order:3;flex-basis:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
  .nav::-webkit-scrollbar{height:3px;}
  .nav::-webkit-scrollbar-thumb{background:var(--line2);border-radius:2px;}
  .topright{margin-left:auto;}
  .realflag{font-size:9px;padding:2px 6px;}
}

/* tablet portrait — up to 880px */
@media (max-width:880px){
  /* collapse common 2-col grids that we share */
  .kv{grid-template-columns:1fr auto;gap:5px 10px;font-size:12px;}
}