/* Merchant's Ledger — canonical tokens
   Mirrors src/styles/_tokens-b.sass 1:1. Reference by --name; never hex literals. */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..700,0..100;1,9..144,300..700,0..100&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

:root {
  /* ----- Ground — warm paper ----- */
  --bg-app: #f1ebdd;
  --bg-sidebar: #e8dfc9;
  --bg-panel: #f8f3e6;
  --bg-hover: #ddd2b8;
  --bg-elevated: #fbf7eb;

  /* ----- Ink ----- */
  --ink: #141418;
  --accent: #141418;
  --accent-soft: #e5dcc4;
  --accent-hover: #2a2a30;

  /* ----- Amber — used sparingly ----- */
  --amber: #a86b2f;
  --amber-soft: #efe1ca;

  /* ----- Text ----- */
  --text-primary: #141418;
  --text-secondary: #524a37;
  --text-tertiary: #8a7f62;
  --text-on-ink: #f8f3e6;

  /* ----- Rules / borders ----- */
  --border: #c9bf9e;
  --border-subtle: #d7ccac;
  --rule: #c9bf9e;
  --divider: #b5a987;

  /* ----- Semantic (red for errors/failed only) ----- */
  --danger: #a72f1f;
  --danger-soft: #f3e5df;
  --danger-border: #dcbaae;

  /* ----- Shadow — warm, low. Used rarely. ----- */
  --shadow-sm: 0 1px 0 rgba(80, 65, 30, 0.06), 0 1px 2px rgba(80, 65, 30, 0.03);
  --shadow-md: 0 2px 4px rgba(80, 65, 30, 0.05), 0 8px 24px rgba(80, 65, 30, 0.06);

  /* ----- Corners (sharp, editorial) ----- */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-pill: 100px;

  /* ----- Spacing ----- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 20px;
  --space-xl: 32px;
  --space-2xl: 56px;

  /* ----- Type stacks ----- */
  --font-display: "Fraunces", Georgia, "Cambria", serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", "Monaco", monospace;

  /* ----- Semantic type roles ----- */
  --h1-size: 60px;
  --h1-lh: 1.05;
  --h1-ls: -0.025em;
  --h2-size: 48px;
  --h3-size: 32px;
  --h4-size: 22px;
  --body-size: 15px;
  --body-lh: 1.55;
  --small-size: 13px;
  --eyebrow-size: 10.5px;
  --eyebrow-ls: 0.18em;
}

/* ----- Base element styles ----- */
html, body {
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  letter-spacing: -0.005em;
  font-feature-settings: "ss01", "cv11";
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--h1-size);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: var(--h1-ls);
  line-height: var(--h1-lh);
  color: var(--text-primary);
  margin: 0;
}
h1 em, .h1 em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 60;
  color: var(--amber);
  font-weight: 500;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -0.022em;
  line-height: 1.08;
  color: var(--text-primary);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  font-weight: 500;
  font-variation-settings: "opsz" 48, "SOFT" 30;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--h4-size);
  font-weight: 500;
  font-variation-settings: "opsz" 36, "SOFT" 30;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--text-primary);
}

.body-editorial {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36, "SOFT" 50;
  font-size: 17px;
  line-height: 1.68;
  color: var(--text-primary);
}

.eyebrow, .label-mono {
  font-family: var(--font-mono);
  font-size: var(--eyebrow-size);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-ls);
  color: var(--text-tertiary);
  font-variant-caps: all-small-caps;
}

code, .code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--amber-soft);
  color: var(--text-primary);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

pre {
  background: var(--ink);
  color: var(--text-on-ink);
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  overflow-x: auto;
}

a {
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(168, 107, 47, 0.4);
  transition: text-decoration-color 120ms ease;
}
a:hover { text-decoration-color: var(--amber); }

hr, .rule {
  border: 0;
  border-top: 1px solid var(--rule);
  opacity: 0.55;
  margin: 0;
}

.tabular { font-variant-numeric: tabular-nums; }
.small-caps { font-variant-caps: all-small-caps; }