:root {
  color-scheme: light dark;
  --paper: #F5F6F3;
  --paper-raised: #FFFFFF;
  --ink: #161B18;
  --ink-soft: #5B6560;
  --line: #DEE3DE;
  --accent: #0E7A5F;
  --accent-soft: #E4F2ED;
  --money: #7A5A1E;
  --money-soft: rgba(185, 134, 47, .14);
  --risk: #A83A2C;
  --risk-soft: rgba(168, 58, 44, .14);
  --shadow: 0 1px 2px rgba(15, 20, 15, .03), 0 16px 32px -22px rgba(15, 20, 15, .28);

  /* input/output get their own two dedicated hues (indigo/rose) instead of borrowing
     --money or --accent, so "give this" and "get this" each read as their own deliberate
     color rather than a wash of whatever else was nearby in the palette. Form fields carry
     this only via border + label, not a filled background. */
  --input-accent: #3B4E9E;
  --input-accent-soft: rgba(59, 78, 158, .14);
  --input-tint: var(--input-accent-soft);
  --input-tint-border: rgba(59, 78, 158, .40);
  --input-inset-shadow: rgba(15, 20, 15, .05);

  --output-accent: #994E67;
  --output-accent-soft: rgba(153, 78, 103, .10);
  --output-tint: var(--output-accent-soft);
  --output-tint-border: rgba(153, 78, 103, .26);

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* wordmark only - --font-display (serif) stays everywhere else, h2 included */
  --font-brand: "Unbounded", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12150F;
    --paper-raised: #191D16;
    --ink: #E7ECE6;
    --ink-soft: #8E988F;
    --line: #2C332B;
    --accent: #3FBF93;
    --accent-soft: rgba(63, 191, 147, 0.14);
    --money: #E0A94E;
    --money-soft: rgba(224, 169, 78, .14);
    --risk: #E2695A;
    --risk-soft: rgba(226, 105, 90, .14);
    --shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 16px 32px -20px rgba(0, 0, 0, .6);

    --input-accent: #7C8FE0;
    --input-accent-soft: rgba(124, 143, 224, .18);
    --input-tint: var(--input-accent-soft);
    --input-tint-border: rgba(124, 143, 224, .42);
    --input-inset-shadow: rgba(0, 0, 0, .25);

    --output-accent: #CA88A4;
    --output-accent-soft: rgba(202, 136, 164, .13);
    --output-tint: var(--output-accent-soft);
    --output-tint-border: rgba(202, 136, 164, .24);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #12150F;
  --paper-raised: #191D16;
  --ink: #E7ECE6;
  --ink-soft: #8E988F;
  --line: #2C332B;
  --accent: #3FBF93;
  --accent-soft: rgba(63, 191, 147, 0.14);
  --money: #E0A94E;
  --money-soft: rgba(224, 169, 78, .14);
  --risk: #E2695A;
  --risk-soft: rgba(226, 105, 90, .14);
  --shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 16px 32px -20px rgba(0, 0, 0, .6);

  --input-accent: #7C8FE0;
  --input-accent-soft: rgba(124, 143, 224, .18);
  --input-tint: var(--input-accent-soft);
  --input-tint-border: rgba(124, 143, 224, .42);
  --input-inset-shadow: rgba(0, 0, 0, .25);

  --output-accent: #CA88A4;
  --output-accent-soft: rgba(202, 136, 164, .13);
  --output-tint: var(--output-accent-soft);
  --output-tint-border: rgba(202, 136, 164, .24);
}

:root[data-theme="light"] {
  color-scheme: light;
  --paper: #F5F6F3;
  --paper-raised: #FFFFFF;
  --ink: #161B18;
  --ink-soft: #5B6560;
  --line: #DEE3DE;
  --accent: #0E7A5F;
  --accent-soft: #E4F2ED;
  --money: #7A5A1E;
  --money-soft: rgba(185, 134, 47, .14);
  --risk: #A83A2C;
  --risk-soft: rgba(168, 58, 44, .14);
  --shadow: 0 1px 2px rgba(15, 20, 15, .03), 0 16px 32px -22px rgba(15, 20, 15, .28);

  --input-accent: #3B4E9E;
  --input-accent-soft: rgba(59, 78, 158, .14);
  --input-tint: var(--input-accent-soft);
  --input-tint-border: rgba(59, 78, 158, .40);
  --input-inset-shadow: rgba(15, 20, 15, .05);

  --output-accent: #994E67;
  --output-accent-soft: rgba(153, 78, 103, .10);
  --output-tint: var(--output-accent-soft);
  --output-tint-border: rgba(153, 78, 103, .26);
}