/* munshi-ui.css — the ONE Munshi design system.
 *
 * Tokens + core components (buttons, cards, fields), shared by app.html,
 * index.html and admin.html. This is the single source of truth: change a
 * button or card HERE and it changes on the landing AND in the app. Authored
 * to match the app (styles.css) exactly so nothing shifts when it's linked.
 *
 * Load order: link this BEFORE a page's own <style>/styles.css so page-specific
 * rules can still override during the transition to a fully-shared system.
 */

:root {
  --paper: #F6F2EA;
  --paper-2: #FFFDF8;       /* raised card surface — lighter than the ground */
  --paper-3: #ECE6D9;
  --surface: #FFFDF8;       /* THE card colour — crisp near-white on cream.
                               Named separately from --paper-2 because the
                               landing repurposes --paper-2 as a DARKER band. */
  --rule: #E4DECF;          /* hairline — soft; whitespace does the work */
  --rule-soft: #EDE8DC;
  --rule-strong: rgba(28,26,22,.16);
  --ink: #1C1A16;
  --ink-2: #5B564C;
  --ink-3: #756E5F;  /* AA-passing tertiary (4.5:1 on paper) */
  --ink-4: #B4AC9B;
  --accent: #AE2B22;        /* status red — never decorative */
  --accent-soft: #F4E4E1;
  --ledger: #2F6B3A;        /* status green */
  --ledger-soft: #E1EADD;
  --gold: #A8791F;          /* the single accent */
  --gold-soft: #EFE3C6;
  --gold-tint: #F6EFDC;

  --serif: "Source Serif 4", "Source Serif Pro", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Radius scale — the app's soft-but-restrained rounding. */
  --r-card: 10px;
  --r-field: 6px;
  --r-btn: 6px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────
 * The app's exact button. `.primary` = solid ink, `.ghost` = hairline,
 * `.danger` = accent. `.lg` bumps the size for landing heroes; `.tiny` shrinks.
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 8px 15px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  border-radius: var(--r-btn);
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn.ghost { border-color: var(--rule); color: var(--ink-2); background: transparent; }
.btn.ghost:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink); }
.btn.danger { border-color: var(--accent); color: var(--accent); background: transparent; }
.btn.danger:hover { background: var(--accent); color: var(--paper); }
.btn.tiny { font-size: 11px; padding: 5px 10px; }
.btn.lg { font-size: 14px; padding: 13px 24px; gap: 10px; letter-spacing: 0.01em; }
.btn.lg:hover { transform: translateY(-1px); }
.btn:disabled { opacity: 0.5; cursor: wait; }

/* ── Cards ───────────────────────────────────────────────────────────────
 * The app's exact card shell (from .feed-card): raised paper, hairline,
 * soft 10px corners, a shadow that lifts on hover. Put content inside.
 */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: 18px 20px;
  position: relative;
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.card.lift:hover { box-shadow: 0 8px 24px -14px rgba(28,26,22,0.28); }
.card.pad-lg { padding: 26px 28px; }

/* ── Form fields ─────────────────────────────────────────────────────────
 * The app's exact text input.
 */
.field {
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-field);
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
}
.field:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-tint); }