/* PriceHawk shared design tokens, fonts, and base styles.
   Fonts: Baloo 2 (display) + Nunito Sans (body), both SIL OFL, vendored
   locally in fonts/ — no CDN calls, works over an SSH tunnel offline,
   same convention as chart.umd.min.js. */

@font-face {
  font-family: "Baloo 2";
  src: url("/static/fonts/baloo2.woff2") format("woff2");
  font-weight: 600 800;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("/static/fonts/nunitosans.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  /* surfaces */
  --cream: #fff3e6;
  --paper: #fffdfa;
  --line: #f0dfc8;

  /* ink */
  --ink: #2b1d14;
  --ink-2: #6b5546;
  --muted: #8c7563;

  /* brand */
  --rust: #e8622c;       /* large/decorative use: wordmark, big prices, icons */
  --rust-btn: #c74617;   /* button fills — passes 4.5:1 with white text */
  --teal: #17877a;
  --teal-btn: #12786c;
  --gold: #f0a202;       /* "caught" / at-target */
  --berry: #c4384d;      /* danger */
  --on-accent: #ffffff;  /* text color placed on any accent fill */

  --focus: var(--rust-btn);
  --radius: 16px;
  --radius-sm: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cream: #211712;
    --paper: #332419;
    --line: #4a362a;

    --ink: #fbeee4;
    --ink-2: #d8c2b0;
    --muted: #93816f;

    --rust: #ff8a5b;
    --rust-btn: #ff8a5b;
    --teal: #4fc3b0;
    --teal-btn: #4fc3b0;
    --gold: #ffc93c;
    --berry: #ff8093;
    --on-accent: #211712;
  }
}

* { box-sizing: border-box; margin: 0; }

body {
  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--cream); color: var(--ink);
  min-height: 100vh; font-size: 15px; line-height: 1.5;
}

.font-display { font-family: "Baloo 2", ui-rounded, "Segoe UI", sans-serif; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

a { color: var(--teal); }

/* --- shared buttons --- */

button { font-family: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 700; cursor: pointer; border-radius: 999px; border: none;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--rust-btn); color: var(--on-accent);
  padding: 10px 20px; font-size: 14px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.08);
}
.btn-primary:hover { box-shadow: 0 4px 10px color-mix(in srgb, var(--rust-btn) 45%, transparent); }

.btn-ghost {
  background: transparent; color: var(--ink-2);
  border: 1.5px solid var(--line); padding: 8px 16px; font-size: 13.5px;
}
.btn-ghost:hover { border-color: var(--muted); color: var(--ink); background: color-mix(in srgb, var(--paper) 60%, transparent); }

.btn-icon {
  background: var(--paper); color: var(--ink-2); border: 1.5px solid var(--line);
  width: 32px; height: 32px; padding: 0; font-size: 14px; border-radius: 10px;
}
.btn-icon:hover { color: var(--ink); border-color: var(--muted); }
.btn-icon.danger:hover { color: var(--berry); border-color: var(--berry); }

/* --- pills / badges --- */

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.pill-teal { background: color-mix(in srgb, var(--teal) 16%, var(--paper)); color: var(--teal-btn); }
.pill-gold { background: var(--gold); color: var(--ink); }
.pill-muted { background: color-mix(in srgb, var(--muted) 16%, var(--paper)); color: var(--ink-2); }
.pill-berry { background: color-mix(in srgb, var(--berry) 16%, var(--paper)); color: var(--berry); }