/* PM4 design tokens. Ported from PM2 — the UX benchmark the owner named.
   Flat by conviction: no box-shadow anywhere. Elevation is background steps + 1px borders.
   Teal means "this is the thing to do next". Cyan is focus and nothing else. */

:root {
  --bg-black:      #0A0A0A;
  --bg-card:       #111111;
  --bg-interactive:#141414;
  --bg-elevated:   #1A1A1A;
  --bg-well:       #050505;
  --bg-disabled:   #242424;

  --text-white:    #FFFFFF;
  --text-gray:     #B3B3B3;
  --text-muted:    #949494;
  --text-dim:      #858585;
  --text-inverse:  #0A0A0A;

  --border:        #222222;
  --border-light:  #333333;

  --accent-teal:   #1D9E75;
  --accent-teal-h: #168a63;
  --accent-blue:   #4B7BF5;
  --accent-cyan:   #06B6D4;

  --success:       #22C55E;
  --error:         #FF6666;
  --warning:       #F59E0B;

  --progress-bg:   #10201c;
  --progress-edge: rgba(35, 197, 154, .45);

  /* spacing scale — respondent.css in PM2 abandoned this and hard-coded 6/10/13/18/22/26. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px;

  --r-control: 4px;
  --r-card:    8px;
  --r-pill:    100px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Phones get softer corners and larger controls by design. */
@media (max-width: 768px) {
  :root { --r-control: 8px; }
}