/*
 * theme.css — Household's design-system values.
 *
 * Swiss × monochrome-ink: one ink, one paper ground, a single deep-green
 * accent, hairline rules, square corners, no shadow. The only other colour
 * on the page is chosen by the family for their own categories, drawn from
 * data — never from this file.
 */

:root {
  --canvas: #f6f3ec;
  --surface: #fbfaf6;
  --surface-2: #eeeade;
  --border: #ded8c8;
  --border-strong: #a9a08c;
  --ink: #1a1a16;
  --muted: #696863;

  --accent: #1f4b3f;
  --accent-hover: #17392f;
  --accent-ink: #f6f3ec;
  --accent-text: #1f4b3f;
  --accent-soft: #e3ebe4;
  --accent-strong: #1f4b3f;
  --accent-border: #b7cabb;

  --success: #2f6b46;
  --success-ink: #ffffff;
  --success-soft: #e1ede4;
  --success-strong: #235c37;
  --warning: #9a5b13;
  --warning-ink: #ffffff;
  --warning-soft: #f3e6d3;
  --warning-strong: #7c480d;
  --danger: #a43a2f;
  --danger-ink: #ffffff;
  --danger-soft: #f5e1dd;
  --danger-strong: #8a2e24;

  --chart-1: #1f4b3f;
  --chart-2: #2f5f8f;
  --chart-3: #b6612c;
  --chart-4: #6b3f63;
  --chart-5: #1f6b6b;
  --chart-6: #8a7a1f;

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 0px;
  --radius-card: 0px;
  --radius-input: 0px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-raised: none;
  --shadow-btn: none;
  --card-pad: 1.25rem;
  --caps: uppercase;
  --caps-tracking: 0.06em;
  --btn-weight: 600;
  --measure: 62ch;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #17180f;
  --surface: #1f2116;
  --surface-2: #272a1c;
  --border: #383b2b;
  --border-strong: #565a41;
  --ink: #f2f0e6;
  --muted: #a5a396;

  --accent: #86bda1;
  --accent-hover: #9ecdb4;
  --accent-ink: #10231b;
  --accent-text: #86bda1;
  --accent-soft: #223b30;
  --accent-strong: #a0d3b8;
  --accent-border: #33513f;

  --success: #4f9b6e;
  --success-ink: #0d1f15;
  --success-soft: #1a2c1f;
  --success-strong: #7cc79a;
  --warning: #d99a4e;
  --warning-ink: #241705;
  --warning-soft: #2c2213;
  --warning-strong: #f0b876;
  --danger: #d9806e;
  --danger-ink: #250b06;
  --danger-soft: #2d1813;
  --danger-strong: #f0a08f;

  --chart-1: #86bda1;
  --chart-2: #6fa0d6;
  --chart-3: #e0955c;
  --chart-4: #b27ea8;
  --chart-5: #5fb3b3;
  --chart-6: #d0bd5a;
}

/*
 * app.css — Household's own CSS: the pieces no primitive covers.
 *
 * The ledger itself is built entirely from primitives and utilities; besides
 * squaring off the native colour swatch, the only other thing here is the
 * mobile category drawer: closed it is removed from layout entirely
 * (display:none, not an off-screen transform), so it never sits behind
 * other content or gets measured at a negative position; app.js toggles
 * `.is-open`.
 */

.sidebar {
  display: none;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: 18rem;
  overflow-y: auto;
}
.sidebar.is-open {
  display: flex;
}
@media (min-width: 768px) {
  .sidebar {
    display: flex;
    position: sticky;
    inset: auto;
    height: 100vh;
    width: 16rem;
  }
}

.scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, 0.4);
}
.scrim.is-open {
  display: block;
}
@media (min-width: 768px) {
  .scrim.is-open {
    display: none;
  }
}

input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  padding: 2px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"]::-webkit-color-swatch {
  border: none;
}
input[type="color"]::-moz-color-swatch {
  border: none;
}