/*
 * theme.css — Hearth's design-system values.
 * Studio-minimal: white space as the material, hairline rules, black ink,
 * one warm serif reserved for the month's total and the wordmark.
 */

:root {
  --canvas: #faf9f6;
  --surface: #fdfcfb;
  --surface-2: #f1efe9;
  --border: #e3e0d8;
  --border-strong: #c9c5b8;
  --ink: #191919;
  --muted: #6a6a68;

  --accent: #2e3a50;
  --accent-hover: #232c3d;
  --accent-ink: #ffffff;
  --accent-text: #2e3a50;
  --accent-strong: #2e3a50;
  --accent-soft: #e8eaee;
  --accent-border: #c3c9d4;

  --success: #2f6f4e;
  --success-ink: #ffffff;
  --success-soft: #e3efe8;
  --success-strong: #235c3f;
  --warning: #93591b;
  --warning-ink: #ffffff;
  --warning-soft: #f3e8d8;
  --warning-strong: #7a4a15;
  --danger: #a3342a;
  --danger-ink: #ffffff;
  --danger-soft: #f5e0dd;
  --danger-strong: #8c2c23;

  --chart-1: #2e3a50;
  --chart-2: #3f7d4a;
  --chart-3: #3a6ea5;
  --chart-4: #c17a2e;
  --chart-5: #a3342a;
  --chart-6: #7c6a9e;

  --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: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.04em;

  /* Studio-minimal shape: square corners, no shadow, hairline borders. */
  --radius-btn: 0px;
  --radius-card: 0px;
  --radius-input: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-raised: 0 12px 32px -8px color-mix(in srgb, var(--ink) 22%, transparent);
  --shadow-btn: none;
  --card-pad: 1.5rem;
  --btn-weight: 500;
  --measure: 68ch;
}

html[data-theme="dark"] {
  --canvas: #17181b;
  --surface: #1f2024;
  --surface-2: #26282d;
  --border: #34363b;
  --border-strong: #4a4d54;
  --ink: #f2f1ee;
  --muted: #9a9a96;

  --accent: #7c93ba;
  --accent-hover: #93a8c8;
  --accent-ink: #12161c;
  --accent-text: #93a8c8;
  --accent-strong: #c1cee2;
  --accent-soft: #29384c;
  --accent-border: #3c516b;

  --success: #4f9d72;
  --success-ink: #0d1f16;
  --success-soft: #1c3324;
  --success-strong: #8fd1ac;
  --warning: #c98a42;
  --warning-ink: #201305;
  --warning-soft: #3a2712;
  --warning-strong: #e0ab6f;
  --danger: #c9584a;
  --danger-ink: #200807;
  --danger-soft: #3a1613;
  --danger-strong: #e08a7d;

  --chart-1: #8fa7c9;
  --chart-2: #7fbf8c;
  --chart-3: #7ab0e0;
  --chart-4: #e0a35f;
  --chart-5: #e08a7d;
  --chart-6: #b3a0d9;
}

/*
 * 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.
 */

/* ---- Side rail nav links --------------------------------------------- */
.side-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 150ms ease;
}
.side-link:hover {
  color: var(--ink);
  text-decoration: none;
}

/* ---- Category spending bar --------------------------------------------
   Width is set to 0 in markup and animated to data-target by app.js on
   app:inview; the transition here is what makes that a fill, not a jump. */
.cat-bar {
  width: 0%;
  transition: width 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
html.reduced-motion .cat-bar { transition: none; }

/* ---- Category tag on a recent-expense row ------------------------------
   A hairline pill in ink, never painted with the category colour itself
   (an arbitrary family-chosen hex has no guaranteed-readable text colour) —
   the colour lives in the dot instead, exactly as it does on the category
   spending bars and the categories list. */
.cat-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
}
.cat-tag-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---- New-category colour swatch ----------------------------------------
   A native <input type="color"> hidden inside a square button; app.js
   mirrors the chosen colour onto the button's own background. */
.new-cat-swatch {
  position: relative;
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  overflow: hidden;
}
.new-cat-swatch input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  opacity: 0;
}

/* ---- Category chip picker (the add-expense form's "select") ------------
   A group of radios styled as chips, each carrying its own category
   colour as --chip-color; :has() marks the checked one without a script. */
.cat-chip {
  --chip-color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.cat-chip:hover { border-color: var(--chip-color); }
.cat-chip:has(input:checked) {
  border-color: var(--chip-color);
  background: color-mix(in srgb, var(--chip-color) 14%, var(--surface));
}
.cat-chip-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---- Add-expense panel --------------------------------------------------
   Opened by a checkbox the header's "Add expense" label targets (id
   toggle-add-expense) — no script needed for the toggle itself. The grid
   trick animates a true auto-height open/close, the one interaction on the
   page besides the count-up that visibly moves. */
.add-expense-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
#toggle-add-expense:checked ~ .add-expense-panel {
  grid-template-rows: 1fr;
}
html.reduced-motion .add-expense-panel {
  transition: none;
}