/*
 * theme.css — Balance Book. The quiet confidence of a well-run finance
 * office: cream ledger paper, ink-green figures, hairline rules instead of
 * shadows. Corners never rounder than a business card (6px). Light mode is
 * the paper ledger; dark mode is the same office after hours — a near-black
 * green ground with antique-gold ink, not an inversion of the light set.
 */

:root {
  --canvas: #f6f4ef;
  --surface: #fbfaf8;
  --surface-2: #ece6d8;
  --border: #ddd5c3;
  --border-strong: #b7ab92;
  --ink: #1c2321;
  --muted: #626462;
  --accent: #1f4b3f;
  --accent-hover: #163a30;
  --accent-ink: #f7f5ee;
  --accent-text: #1f4b3f;
  --accent-strong: #1f4b3f;
  --accent-soft: #e3ece6;
  --accent-border: #b7cec2;
  --success: #2f7d52;
  --success-ink: #ffffff;
  --success-soft: #e0ece3;
  --success-strong: #1f5c3a;
  --warning: #a6631b;
  --warning-ink: #ffffff;
  --warning-soft: #f3e6d3;
  --warning-strong: #8a4c12;
  --danger: #9c3b2e;
  --danger-ink: #ffffff;
  --danger-soft: #f3e0da;
  --danger-strong: #7c2c21;
  --chart-1: #1f4b3f;
  --chart-2: #a6631b;
  --chart-3: #9c3b2e;
  --chart-4: #56613f;
  --chart-5: #3f5f74;
  --chart-6: #6b5672;

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

  --radius-btn: 6px;
  --radius-card: 8px;
  --radius-input: 6px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: 0 1px 2px rgba(28, 35, 33, 0.07);
  --shadow-raised: 0 10px 28px rgba(20, 26, 24, 0.16);
  --shadow-btn: none;
  --card-pad: 1.5rem;
  --caps: none;
  --caps-tracking: 0;
  --btn-weight: 600;
  --measure: 68ch;
}

html[data-theme="dark"] {
  --canvas: #121e18;
  --surface: #182720;
  --surface-2: #1f342a;
  --border: #2c4438;
  --border-strong: #435c4c;
  --ink: #eee8d8;
  --muted: #a7b6a8;
  --accent: #c9a227;
  --accent-hover: #dbb63f;
  --accent-ink: #14201b;
  --accent-text: #d8b74a;
  --accent-strong: #e0c369;
  --accent-soft: #2b3a24;
  --accent-border: #4c5a3c;
  --success: #4caf7d;
  --success-ink: #0f1a14;
  --success-soft: #1d3327;
  --success-strong: #7fcaa2;
  --warning: #d99a3d;
  --warning-ink: #14201b;
  --warning-soft: #3a2c15;
  --warning-strong: #e6b567;
  --danger: #d16a56;
  --danger-ink: #14201b;
  --danger-soft: #3a2019;
  --danger-strong: #e3927e;
  --chart-1: #c9a227;
  --chart-2: #6fae8f;
  --chart-3: #d99a3d;
  --chart-4: #d16a56;
  --chart-5: #7a9bd1;
  --chart-6: #b98fc9;
}

/*
 * app.css — Balance Book's own screens: the tinted ledger band every
 * section opens on, the mono figures inside it, and the team calendar grid
 * with its overlap flags. Everything here reads a token; nothing is a
 * literal colour.
 */

/* ---- Ledger band ---------------------------------------------------------
   A quiet forest-green wash under the page head, on every section, holding
   whatever figures that section leads with. */
.ledger-band {
  background: linear-gradient(180deg, var(--accent-soft) 0%, color-mix(in srgb, var(--accent-soft) 55%, var(--canvas)) 100%);
  border-bottom: var(--border-w, 1px) solid var(--accent-border);
}
.ledger-stats {
  @apply grid gap-x-6 gap-y-5;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.ledger-stat-label {
  @apply text-xs font-semibold text-accent-strong;
  font-family: var(--font-body);
}
.ledger-stat-figure {
  @apply mt-1 flex items-baseline gap-1 font-mono text-2xl tabular-nums text-ink;
}
.ledger-stat-unit {
  @apply text-xs font-medium text-muted;
  font-family: var(--font-display);
}
.ledger-stat-sub {
  @apply mt-1 flex flex-wrap gap-x-3 gap-y-0.5 font-mono text-xs tabular-nums text-muted;
}

/* ---- Statement band (HR reports) — dark, large mono figures on ink. ---- */
.statement-band {
  @apply rounded-lg border border-border bg-ink text-canvas;
  padding: 1.75rem;
}
.statement-figure {
  @apply font-mono text-4xl tabular-nums;
}
.statement-label {
  @apply text-xs font-medium tracking-wide text-canvas/60;
}

/* ---- Team calendar --------------------------------------------------------
   One row per report, one column per day. A coloured bar marks a booked or
   pending range; two bars in the same day cell are a conflict and get a
   dashed ring instead of just sitting side by side. */
.cal-grid {
  display: grid;
  grid-template-columns: 9rem repeat(var(--cal-days, 7), minmax(2.75rem, 1fr));
  border: var(--border-w, 1px) solid var(--border);
  border-radius: var(--radius-card, 8px);
  overflow: hidden;
  background: var(--surface);
}
.cal-head {
  @apply border-b border-border bg-surface-2 px-2 py-2 text-center font-mono text-xs text-muted;
}
.cal-head-name {
  @apply border-b border-border bg-surface-2 px-3 py-2 text-left text-xs font-semibold text-muted;
}
.cal-row-name {
  @apply flex items-center border-b border-r border-border px-3 py-2 text-sm font-medium;
}
.cal-row-name:last-of-type { border-bottom-width: 0; }
.cal-cell {
  @apply relative border-b border-r border-border;
  min-height: 2.5rem;
}
.cal-cell:last-child { border-right-width: 0; }
.cal-bar {
  @apply absolute inset-x-0.5 top-1/2 h-4 -translate-y-1/2 rounded-sm;
}
.cal-bar-approved { background: var(--success); }
.cal-bar-pending { background: var(--warning); opacity: 0.85; }
.cal-cell-conflict .cal-bar {
  outline: 2px dashed var(--danger);
  outline-offset: 1px;
}
.cal-weekend { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }

@media (max-width: 640px) {
  .cal-grid { grid-template-columns: 6.5rem repeat(var(--cal-days, 7), minmax(2.25rem, 1fr)); font-size: 0.75rem; }
}

/* ---- The debit animation — the one moment this app moves. ---- */
@keyframes debit-pulse {
  0% { background-color: color-mix(in srgb, var(--accent) 30%, transparent); }
  100% { background-color: transparent; }
}
.debit-pulse { animation: debit-pulse 750ms ease-out; border-radius: 4px; }
html.reduced-motion .debit-pulse { animation: none; }