/*
 * theme.css — WRITTEN BY THE PLATFORM. Do not edit.
 *
 * Palette: Your colours (custom)
 * Source colours: #030d0a #1c2321 #faf9f6 #155c45 #1f7a5c #ffffff
 *
 * Every value below is either one of those five or derived from them, and each
 * one is contrast-corrected against this palette's own background. Consume
 * them with var(--token); never write a colour value in app code.
 */

:root {
  --canvas: #faf9f6;
  --surface: #fdfcfb;
  --surface-2: #eeedea;
  --border: #d7d8d5;
  --border-strong: #b0b2af;
  --ink: #1c2321;
  --muted: #6c6f6d;
  --accent: #155c45;
  --accent-hover: #124e3b;
  --accent-ink: #ffffff;
  --accent-text: #1f7a5c;
  --accent-strong: #155c45;
  --accent-soft: #dae3dd;
  --accent-border: #93b2a6;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dfeae0;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f2e5da;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f2dedc;
  --danger-strong: #b91c1c;}

/* ====================================================================
 * app.css — Tally's own stylesheet.
 *
 * Character: crisp and airy. Sharper corners than the system default,
 * flatter shadows, hairline rules doing the separating instead of heavy
 * cards, and the monthly total set big and monospaced so the number is
 * the thing your eye lands on first.
 * ==================================================================== */

:root {
  /* Sharper corners than the system default — crisp, not soft. */
  --radius-sm: 4px;
  --radius: 7px;
  --radius-lg: 12px;

  /* Flatter depth: a hairline more than a lift. */
  --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent);
  --shadow-raised: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent),
    0 6px 16px color-mix(in srgb, var(--ink) 6%, transparent);
}

/* ---- Hero: the month you're looking at, and the number that matters --- */
.hero {
  border: 1px solid var(--border);
}

.hero-total {
  font-size: clamp(2.25rem, 6vw, var(--t-5xl));
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ---- Quick add: the whole reason this app exists ---------------------- */
.quickadd-row {
  align-items: flex-end;
}
/* Specificity matches the system's ".field-row > .field" exactly, so these
   win the tie by loading after design.css — a single extra class would not. */
.quickadd-row > .field-amount {
  flex: 0 0 150px;
}
.quickadd-row > .field-submit {
  flex: 0 0 auto;
}
.quickadd-row > .field-description {
  flex: 3 1 240px;
}

@media (max-width: 640px) {
  .quickadd-row > .field-amount,
  .quickadd-row > .field-description,
  .quickadd-row > .field-submit {
    flex: 1 1 100%;
  }
}

/* A text prefix inside an .input-group, the same slot the system reserves
   for a leading icon — mirrors .input-group .icon exactly. */
.input-group .prefix {
  position: absolute;
  left: var(--s-3);
  color: var(--muted);
  font-size: var(--t-sm);
  font-weight: var(--fw-medium);
  pointer-events: none;
}
.input-group .prefix ~ .input {
  padding-left: var(--s-8);
}

/* ---- Setup / sign-in: a single centred card, nothing else on screen --- */
.auth-wrap {
  min-height: calc(100vh - var(--s-12) * 2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6) 0;
}
.auth-card {
  width: 100%;
  max-width: 400px;
}
.auth-mark {
  width: 48px;
  height: 48px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-xl);
}

/* ---- The ledger: day subtotal rows inside the ordinary .table ---------- */
.daysub td {
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--fw-semi);
  padding-top: var(--s-2);
  padding-bottom: var(--s-2);
}
.daysub:hover td {
  background: var(--surface-2);
}