/*
 * theme.css — Ruled's design-system values.
 *
 * A statement-page ledger: paper canvas, ink text, a single spare green for
 * links and the rare highlight. No radius, no shadow — hairline borders do
 * all the separating. Small caps come from --caps: uppercase, used on nav,
 * table heads and the plan table — never a tracked eyebrow line.
 */

:root {
  --canvas: #fafaf8;
  --surface: #fdfdfc;
  --surface-2: #efeee9;
  --border: #e2ded4;
  --border-strong: #b9b3a3;
  --ink: #14171a;
  --muted: #67696a;
  --accent: #14171a;
  --accent-hover: #2b2f33;
  --accent-ink: #fdfdfc;
  --accent-text: #1b6b4a;
  --accent-strong: #14171a;
  --accent-soft: #eceae2;
  --accent-border: #c3cec6;
  --success: #1b6b4a;
  --success-ink: #fdfdfc;
  --success-soft: #e3ede7;
  --success-strong: #14513a;
  --warning: #9a6a12;
  --warning-ink: #fdfdfc;
  --warning-soft: #f3ead9;
  --warning-strong: #7c530d;
  --danger: #a4342a;
  --danger-ink: #fdfdfc;
  --danger-soft: #f5e2df;
  --danger-strong: #7e2921;
  --chart-1: #1b6b4a;
  --chart-2: #14171a;
  --chart-3: #9a6a12;
  --chart-4: #5c7a8a;
  --chart-5: #a4342a;
  --chart-6: #6b5b8f;

  --font-display: "Archivo", ui-sans-serif, system-ui, sans-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, Consolas, monospace;
  --display-weight: 800;
  --display-tracking: -0.03em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 0px;
  --radius-card: 0px;
  --radius-input: 0px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-raised: 0 0 0 1px var(--border);
  --shadow-btn: none;
  --card-pad: 1.5rem;
  --caps: uppercase;
  --caps-tracking: 0.08em;
  --btn-weight: 500;
  --measure: 62ch;

  /* The dark statement band ("Built for the close") stays ink regardless of
     mode — a fixed page in the ledger, not a themed surface. */
  --x-band-bg: #14171a;
  --x-band-text: #f5f3ee;
  --x-band-link: #4fae82;
  --x-band-muted: #9a9c9a;
}

html[data-theme="dark"] {
  --canvas: #14171a;
  --surface: #1a1d20;
  --surface-2: #202427;
  --border: #2c3033;
  --border-strong: #494e51;
  --ink: #f5f3ee;
  --muted: #9a9c9a;
  --accent: #f5f3ee;
  --accent-hover: #ffffff;
  --accent-ink: #14171a;
  --accent-text: #4fae82;
  --accent-strong: #f5f3ee;
  --accent-soft: #232821;
  --accent-border: #3a4a3f;
  --success: #4fae82;
  --success-ink: #0d1a14;
  --success-soft: #17251d;
  --success-strong: #7cc7a2;
  --warning: #cf9a44;
  --warning-ink: #1a1206;
  --warning-soft: #2b2013;
  --warning-strong: #e0b56c;
  --danger: #cf6455;
  --danger-ink: #1a0e0b;
  --danger-soft: #2b1815;
  --danger-strong: #e0897c;
  --chart-1: #4fae82;
  --chart-2: #dedad0;
  --chart-3: #cf9a44;
  --chart-4: #7fa3b5;
  --chart-5: #cf6455;
  --chart-6: #a493cf;

  --x-band-bg: #0c0e10;
  --x-band-text: #f5f3ee;
  --x-band-link: #5fc397;
  --x-band-muted: #9a9c9a;
}

/*
 * app.css — THIS APP'S OWN CSS, for what no primitive and no utility covers:
 * the one screen that makes this app itself — a timer's dial, a kanban
 * board's columns, a seating plan, a game grid. Write those here, named for
 * what they are, in tokens only (var(--accent), var(--radius-card),
 * var(--font-display)). It loads last, after design.css and theme.css, and
 * wins. Ships empty.
 *
 * Not for restyling a primitive: those live in tailwind/components.css and
 * are yours to edit there. Not for colours: those live in theme.css.
 */

/* ---- The category marquee — the page's one motion moment ----------------
   A slow, continuous line of expense categories under the hero. The track
   holds the list twice back to back; translating it exactly -50% loops with
   no seam. Everything else on the page is still. */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* overflow-x AND a hard max-width, because overflow-x alone still let the
   track's own intrinsic (max-content) width register as the page's
   scrollable area on a narrow screen — the strip clipped visually but the
   page still scrolled sideways to it. */
.marquee { position: relative; max-width: 100%; overflow-x: hidden; overflow-y: visible; }
.marquee-track {
  display: inline-flex;
  width: max-content;
  max-width: none;
  animation: marquee-scroll 32s linear infinite;
}
.marquee-item { padding-inline-end: 3rem; white-space: nowrap; flex-shrink: 0; }
html.reduced-motion .marquee-track { animation: none; }

/* Belt and suspenders: nothing on this page should ever be able to push the
   viewport wider than the screen. */
html, body { max-width: 100%; overflow-x: hidden; }

/* ---- The dark statement band ("Built for the close") ---------------------
   Stays ink regardless of light/dark mode — a fixed page in the ledger. */
.band-ink { background: var(--x-band-bg); color: var(--x-band-text); }
.band-ink .text-band-link { color: var(--x-band-link); }
.band-ink .text-band-muted { color: var(--x-band-muted); }