@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

@theme inline {
  --color-ledger-paper: var(--ledger-paper);
  --color-ledger-ink: var(--ledger-ink);
  --color-ledger-muted: var(--ledger-muted);
  --color-ledger-rule: var(--ledger-rule);
  --color-ledger-signal: var(--ledger-signal);
  --font-sans: var(--design-font);
  --font-mono: var(--font-geist-mono, ui-monospace), monospace;
}

:root {
  --ledger-paper: #f4f1ea;
  --ledger-ink: #171717;
  --ledger-muted: #6b645b;
  --ledger-rule: #d9d1c3;
  --ledger-signal: #c43e1c;
  --design-font: var(--font-geist-sans, ui-sans-serif), sans-serif;
  --spacing: 0.25rem;
  color-scheme: light;
}
.dark {
  --ledger-paper: #12110f;
  --ledger-ink: #ede8de;
  --ledger-muted: #9e9689;
  --ledger-rule: #2a2722;
  --ledger-signal: #e76b49;
  color-scheme: dark;
}
body {
  background: var(--ledger-paper);
  color: var(--ledger-ink);
  font-family: var(--design-font);
  -webkit-font-smoothing: antialiased;
}
* { border-radius: 0; box-shadow: none; }
:is(button, input, select, textarea, [class~="border"]) { border-radius: 0px; }

::selection { background: var(--ledger-signal); color: var(--ledger-paper); }
:focus-visible { outline: 2px solid var(--ledger-signal); outline-offset: 3px; }
.ledger-link { position: relative; display: inline-block; color: var(--ledger-ink); text-decoration: none; }
.ledger-link::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 40px; height: 2px; background: var(--ledger-signal); transition: width 120ms ease-out; }
.ledger-link:hover::after, .ledger-link:focus-visible::after { width: 100%; }
.bg-grid-pattern { background-image: radial-gradient(var(--ledger-ink) 1px, transparent 1px); background-size: 24px 24px; }