/* cashmoney design system tokens and the components the web app uses. */

/* Self-hosted Latin subsets from Google Fonts, under the SIL Open Font License
   (see fonts/OFL-*.txt in the repository). Both are variable fonts covering the weights below. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/dm-sans-latin.woff2") format("woff2"); }

:root {
  --paper: #fbfcf6;
  --card: #ffffff;
  --line: #dfe5dc;
  --ink: #14261c;
  --ink-muted: #55665c;
  --cash: #2fbf71;
  --cash-deep: #157347;
  --cash-soft: #d4f5e2;
  --coin: #ffc93c;
  --oops: #c4361d;
  --icon-tile: #d4f5e2;
  --on-fill: #14261c;
  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-8: 32px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-pill: 999px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1a14;
    --card: #17251d;
    --line: #2a3a30;
    --ink: #eef4ee;
    --ink-muted: #a3b3a9;
    --cash: #3fd486;
    --cash-deep: #6fe0a2;
    --cash-soft: #1d3a2a;
    --coin: #ffd25c;
    --oops: #ff7a63;
    --icon-tile: #c4ecd4;
    --on-fill: #0f1a14;
  }
}

body { margin: 0; font-family: var(--font-sans); background: var(--paper); color: var(--ink); }
a { color: var(--cash-deep); }
a:hover { color: var(--ink); }

.cm-btn { font: inherit; font-size: 16px; font-weight: 600; height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; transition: transform .12s ease; box-sizing: border-box; text-decoration: none; }
a.cm-btn:hover { color: var(--ink); }
.cm-btn:active { transform: scale(.97); }
.cm-btn-primary { background: var(--cash); border-color: var(--cash); color: var(--on-fill); }
.cm-btn-quiet:hover { border-color: var(--ink-muted); }
.cm-btn:focus-visible { outline: 3px solid var(--cash-deep); outline-offset: 2px; }
.cm-btn:disabled { opacity: .5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .cm-btn { transition: none; } }

/* Sign-in screen */
.login { box-sizing: border-box; min-height: 100vh; min-height: 100dvh; max-width: 420px; margin: 0 auto; padding: var(--space-8) var(--space-4); display: flex; flex-direction: column; }
.login-brand { margin: 0; height: 30px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -0.01em; }
.login-main { flex-grow: 1; display: flex; flex-direction: column; text-align: center; }
.login-hero { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); padding-bottom: 64px; }
.login-hero h1 { margin: 0; font-family: var(--font-display); font-size: 44px; line-height: 48px; font-weight: 800; letter-spacing: -0.02em; }
.login-hero p { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.login-actions { display: flex; flex-direction: column; gap: var(--space-4); }
.login-actions p { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.cm-btn-wide { width: 100%; height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
.login-g { width: 24px; height: 24px; box-sizing: border-box; border-radius: var(--radius-pill); border: 1px solid var(--line); display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--ink-muted); }

/* Household transaction detail */
.cm-transaction { max-width: 720px; margin: 0 auto; padding: var(--space-8) var(--space-4); line-height: 1.5; }
.cm-transaction h1 { overflow-wrap: anywhere; }
.cm-transaction h1, .cm-transaction h2 { font-family: var(--font-display); font-size: 24px; line-height: 30px; }
.cm-transaction-amount { font-family: var(--font-display); font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cm-transaction section { margin-top: var(--space-8); }
.cm-transaction dt { font-weight: 600; margin-top: var(--space-2); }
.cm-transaction dd { margin-left: 0; overflow-wrap: anywhere; }
.cm-muted { color: var(--ink-muted); font-size: 13px; }
.cm-error { color: var(--oops); overflow-wrap: anywhere; }
.cm-transaction form { display: grid; gap: var(--space-2); }
.cm-transaction input:not([type=checkbox]):not([type=hidden]), .cm-transaction select { box-sizing: border-box; width: 100%; min-height: 44px; padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font: inherit; }
.cm-transaction input:focus-visible, .cm-transaction select:focus-visible { outline: 3px solid var(--cash-deep); outline-offset: 2px; }
.cm-transaction button { margin-top: var(--space-4); }
.cm-correction-history { padding-left: 24px; }
.cm-correction-history li { border-bottom: 1px solid var(--line); padding-bottom: var(--space-2); overflow-wrap: anywhere; }

/* Rolling spending uses the same restrained receipt layout as transaction detail. */
.cm-spending { max-width: 760px; margin: 0 auto; padding: var(--space-4, 16px); }
.cm-spending section { margin-top: var(--space-8, 32px); }
.cm-spending-currency { margin: 24px 0; }
.cm-spending-amount { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 8px 0; }
.cm-spending-rows { list-style: none; padding: 0; }
.cm-spending-rows li { padding: 16px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.cm-spending form { display: grid; gap: 12px; margin: 16px 0; }
.cm-spending input:not([type=hidden]):not([type=checkbox]), .cm-spending select { box-sizing: border-box; width: 100%; min-height: 44px; padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font: inherit; }
.cm-spending input:focus-visible, .cm-spending select:focus-visible { outline: 3px solid var(--cash-deep); outline-offset: 2px; }
.cm-spending label { display: grid; gap: 8px; }
.cm-spending nav { line-height: 2; }

.cm-spending h1, .cm-spending h2 { font-family: var(--font-display); font-size: 24px; line-height: 30px; }
.cm-spending-window[aria-label="Last 365 days"] .cm-spending-currency:first-of-type .cm-spending-amount { font-size: 44px; line-height: 48px; font-weight: 800; }
.cm-spending p, .cm-spending li { overflow-wrap: anywhere; }
.cm-spending label:has(input[type=checkbox]) { display: flex; align-items: center; }
.cm-spending table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.cm-spending th, .cm-spending td { padding: var(--space-2); text-align: left; border-bottom: 1px solid var(--line); }