/* PeaceBooks design tokens for the website and the web build.
   Light is the default. Dark applies with [data-theme="dark"] on <html>,
   or automatically from the OS unless [data-theme="light"] is set. */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("/fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 400; font-display: swap; src: url("/fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 600; font-display: swap; src: url("/fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 400; font-style: italic; font-display: swap; src: url("/fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 600; font-style: italic; font-display: swap; src: url("/fonts/source-serif-4-latin-600-italic.woff2") format("woff2"); }

:root {
  /* brand */
  --pb-night: #0B0B0C;
  --pb-canvas: #F3F1EA;
  --pb-white: #FFFFFF;
  --pb-larch-gold: #DCA448;
  --pb-glow-gold: #F2C46D;
  --pb-amber: #A8711B;
  --pb-field-green: #5E7A40;
  --pb-pine: #2F4A22;
  --pb-clay-red: #AC452D;

  /* type */
  --pb-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pb-font-serif: "Source Serif 4", Georgia, serif;

  /* shape and size */
  --pb-radius-sm: 10px;
  --pb-radius-md: 14px;
  --pb-radius-card: 18px;
  --pb-radius-button: 22px;
  --pb-tap-min: 44px;
  --pb-main-button-min: 60px;

  /* Say it button (same in both themes) */
  --pb-say-gradient: radial-gradient(circle at 50% 30%, #F6CF7E 0%, #DCA448 58%, #C08A33 100%);
  --pb-say-icon: #0B0B0C;

  /* light theme (default) */
  --pb-bg: #F3F1EA;
  --pb-surface: #FFFFFF;
  --pb-border: #E0DCD1;
  --pb-text: #0B0B0C;
  --pb-text-muted: #57544D;
  --pb-text-subtle: #625F57;
  --pb-income: #2F4A22;
  --pb-income-icon: #5E7A40;
  --pb-expense: #AC452D;
  --pb-loss-bg: #F7ECE7;
  --pb-loss-text: #9A3D27;
  --pb-primary-bg: #0B0B0C;
  --pb-primary-text: #FFFFFF;
  --pb-gold: #DCA448;
  --pb-gold-text: #85601D;
  --pb-say-ring: #EFE3C8;
  --pb-say-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 24px rgba(192,138,51,.35);
  --pb-nav-bg: #FFFFFF;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --pb-bg: #0B0B0C;
  --pb-surface: #18181A;
  --pb-border: #2B2B2C;
  --pb-text: #F5F3EE;
  --pb-text-muted: #A9A59D;
  --pb-text-subtle: #9C988F;
  --pb-income: #93B56C;
  --pb-income-icon: #93B56C;
  --pb-expense: #E2826A;
  --pb-loss-bg: #2A1814;
  --pb-loss-text: #E2826A;
  --pb-primary-bg: #F5F3EE;
  --pb-primary-text: #0B0B0C;
  --pb-gold: #F2C46D;
  --pb-gold-text: #F2C46D;
  --pb-say-ring: #2A2418;
  --pb-say-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 28px rgba(240,169,59,.35);
  --pb-nav-bg: #121213;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pb-bg: #0B0B0C;
    --pb-surface: #18181A;
    --pb-border: #2B2B2C;
    --pb-text: #F5F3EE;
    --pb-text-muted: #A9A59D;
    --pb-text-subtle: #9C988F;
    --pb-income: #93B56C;
    --pb-income-icon: #93B56C;
    --pb-expense: #E2826A;
    --pb-loss-bg: #2A1814;
    --pb-loss-text: #E2826A;
    --pb-primary-bg: #F5F3EE;
    --pb-primary-text: #0B0B0C;
    --pb-gold: #F2C46D;
    --pb-gold-text: #F2C46D;
    --pb-say-ring: #2A2418;
    --pb-say-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 28px rgba(240,169,59,.35);
    --pb-nav-bg: #121213;
    color-scheme: dark;
  }
}

body { background: var(--pb-bg); color: var(--pb-text); font-family: var(--pb-font-sans); }
.pb-amount { font-variant-numeric: tabular-nums; font-weight: 700; }
.pb-label { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pb-gold-text); }