/* Overbid SF design tokens
   Palette is sampled and refined from the hand-painted Painted Ladies reference.
   Paint colors are raw; semantic tokens below are what components use. */
:root {
  /* paint */
  --sky: #1E5CA6;        /* cobalt sky */
  --sky-deep: #174C8C;
  --ink: #172F4D;        /* deep blue ink: headings, outlines, dark fields */
  --poppy: #D6463C;      /* energetic red house */
  --poppy-deep: #B93A31;
  --coral: #E9865F;
  --peach: #EDB27F;      /* the warm orange house, tree branches */
  --gold: #E8B22F;       /* important moments */
  --gold-deep: #C9941C;
  --leaf: #4E9A3F;       /* trees, positive */
  --leaf-deep: #3B7D30;
  --meadow: #78B454;     /* bright ground green */
  --soft: #A8C47F;       /* secondary surfaces */
  --paper: #F4EAD2;      /* primary background, the unpainted paper */
  --paper-deep: #E9DDBC;
  --cream: #FBF5E6;      /* raised surfaces */
  --cream-line: #D9CCA8;

  /* text */
  --text: #1F2A33;
  --text-soft: #46525C;
  --text-muted: #5B6873;
  --text-on-dark: var(--cream);

  /* surfaces */
  --bg: var(--paper);
  --surface: var(--cream);
  --surface-alt: var(--paper-deep);
  --surface-sky: var(--sky);
  --surface-ink: var(--ink);

  /* borders */
  --border: var(--ink);
  --border-soft: var(--cream-line);
  --border-w: 2px;

  /* actions */
  --action: var(--poppy);
  --action-hover: var(--poppy-deep);
  --action-text: var(--cream);
  --focus: var(--gold);

  /* feedback bands: how close a guess was */
  --band-great: var(--leaf);   /* within 5% */
  --band-good: var(--gold);    /* within 10% */
  --band-ok: var(--coral);     /* within 20% */
  --band-far: var(--poppy);    /* beyond 20% */

  /* chart */
  --chart-guess: var(--coral);
  --chart-actual: var(--sky);
  --chart-ask: var(--ink);
  --chart-track: var(--paper-deep);

  /* shape */
  --radius: 10px;
  --radius-lg: 14px;
  --radius-sm: 6px;
  --touch: 44px;

  /* type */
  --font-display: "Overpass", "Archivo Black", "Arial Black", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* motion */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 140ms;
  --dur: 320ms;
  --dur-slow: 700ms;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}