/* Spendsaw design tokens — generated from tokens.json. Light is the default theme.
   Dark applies with <html data-theme="dark">, or automatically from the OS unless data-theme="light". */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Schibsted+Grotesk:wght@400;500;600;700&display=swap");

:root, [data-theme="light"] {
  --surface: #f5f1ea;
  --surface-raised: #fffdf9;
  --sawdust: #e7ddcc;
  --line: #d3c8b6;
  --line-strong: #8c8579;
  --ink: #1c1e21;
  --ink-muted: #5a5f66;
  --kerf: #c8371f;
  --on-kerf: #ffffff;
  --kerf-soft: #f6ddd5;
  --saved: #1f6b4a;
  --saved-soft: #ddede3;
  --caution: #8a5a00;
  --caution-soft: #f3e6c8;
  --danger: #a3142e;
  --danger-soft: #f5dadf;
  --focus-ring: var(--kerf);
}
[data-theme="dark"] {
  --surface: #141517;
  --surface-raised: #1d1f22;
  --sawdust: #2c2a26;
  --line: #3a3d42;
  --line-strong: #6e6a63;
  --ink: #ede8df;
  --ink-muted: #a6a39c;
  --kerf: #f06a4f;
  --on-kerf: #141517;
  --kerf-soft: #3a211c;
  --saved: #5cc596;
  --saved-soft: #18291f;
  --caution: #e0a84a;
  --caution-soft: #2e2614;
  --danger: #f2768a;
  --danger-soft: #33191e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #141517;
    --surface-raised: #1d1f22;
    --sawdust: #2c2a26;
    --line: #3a3d42;
    --line-strong: #6e6a63;
    --ink: #ede8df;
    --ink-muted: #a6a39c;
    --kerf: #f06a4f;
    --on-kerf: #141517;
    --kerf-soft: #3a211c;
    --saved: #5cc596;
    --saved-soft: #18291f;
    --caution: #e0a84a;
    --caution-soft: #2e2614;
    --danger: #f2768a;
    --danger-soft: #33191e;
  }
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --cut-corner: 8px;
  --font-sans: "Schibsted Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* Type styles */
.text-display { font-family: var(--font-sans); font-size: 56px; line-height: 58px; font-weight: 700; letter-spacing: -0.02em; }  /* Landing-page hero and launch graphics only. */
.text-heading-1 { font-family: var(--font-sans); font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -0.01em; }  /* Page titles, report cover headline. */
.text-heading-2 { font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 600; }  /* Section headings in docs, reports and the console. */
.text-heading-3 { font-family: var(--font-sans); font-size: 17px; line-height: 24px; font-weight: 600; }  /* Finding titles, card headings. */
.text-body { font-family: var(--font-sans); font-size: 15px; line-height: 24px; font-weight: 400; }  /* Default running text. */
.text-body-sm { font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 400; }  /* Metadata, captions, table cells. */
.text-label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.02em; }  /* Badges, form labels, button text at small size. */
.text-figure-xl { font-family: var(--font-mono); font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -0.02em; }  /* Headline savings numbers in reports and the console. */
.text-figure { font-family: var(--font-mono); font-size: 15px; line-height: 24px; font-weight: 500; }  /* Every money amount and count inside running text or cards. */
.text-code { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; }  /* Resource IDs, regions, CLI commands, diffs. */