/* Invoicer — design tokens. Generated from the Invoicer design system (tokens.json). Load before invoicer.css. */
@font-face { font-family: "Geist"; src: url("../fonts/geist/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root, [data-theme="light"] {
  --canvas: #f4f5f7;
  --surface: #ffffff;
  --surface-sunken: #f0f2f4;
  --surface-hover: #f6f7f9;
  --border: #e3e6ea;
  --border-strong: #cbd0d6;
  --field-border: #848b94;
  --ink: #16191d;
  --ink-muted: #555c66;
  --ink-subtle: #69707a;
  --accent: #135d6b;
  --accent-hover: #0e4a56;
  --accent-soft: #e1eeee;
  --accent-ink: #0e4a56;
  --on-accent: #ffffff;
  --focus: #135d6b;
  --success: #1d6b44;
  --success-soft: #e2f0e6;
  --warning: #855000;
  --warning-soft: #faefd7;
  --danger: #b0261d;
  --danger-soft: #fbe7e3;
  --on-danger: #ffffff;
  --shadow-card: 0 1px 0 rgba(26,28,30,0.03), 0 1px 3px rgba(26,28,30,0.05);
  --shadow-raised: 0 2px 4px rgba(26,28,30,0.04), 0 8px 20px rgba(26,28,30,0.07);
  --shadow-pop: 0 4px 8px rgba(26,28,30,0.06), 0 16px 36px rgba(26,28,30,0.14);
}
[data-theme="dark"] {
  --canvas: #111315;
  --surface: #191c1f;
  --surface-sunken: #141619;
  --surface-hover: #202427;
  --border: #2a2e33;
  --border-strong: #3b4046;
  --field-border: #6e737b;
  --ink: #ecebe6;
  --ink-muted: #a7aaaf;
  --ink-subtle: #8e9298;
  --accent: #6cc1cd;
  --accent-hover: #8fd2db;
  --accent-soft: #17353b;
  --accent-ink: #8fd2db;
  --on-accent: #082126;
  --focus: #8fd2db;
  --success: #6ccb96;
  --success-soft: #16301f;
  --warning: #e8b75a;
  --warning-soft: #36290f;
  --danger: #f2908a;
  --danger-soft: #3b1b19;
  --on-danger: #2a0b09;
  --shadow-card: 0 1px 0 rgba(0,0,0,0.35);
  --shadow-raised: 0 2px 4px rgba(0,0,0,0.4), 0 8px 20px rgba(0,0,0,0.35);
  --shadow-pop: 0 4px 8px rgba(0,0,0,0.5), 0 16px 36px rgba(0,0,0,0.5);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --control-h: 40px;
  --control-h-sm: 32px;
  --sidebar-w: 240px;
  --rail-w: 300px;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
.t-display { font-family: var(--font-sans); font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: -0.02em; }
.t-title { font-family: var(--font-sans); font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.02em; }
.t-heading { font-family: var(--font-sans); font-size: 16px; line-height: 22px; font-weight: 600; }
.t-amount { font-family: var(--font-sans); font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; }
.t-body { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.t-body-strong { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 550; }
.t-label { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; }
.t-small { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }
.t-eyebrow { font-family: var(--font-sans); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.t-code-lg { font-family: var(--font-mono); font-size: 15px; line-height: 20px; font-weight: 500; }
.t-code { font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 450; }