/* The platform's look on every demo page (src/styles/tokens.css, dark-hc, and src/ui): black, white text, #5a5a5a
   lines, white primary buttons, 8px corners, Geist and JetBrains Mono, the wordmark logo. Purple is the focus ring
   and links only; green is approved, amber is "a person decides". Loaded after each page's own stylesheet, so its
   tokens and these few rules win. Labels never darker than #999 on black. */

:root {
  --bg: #000000;
  --surface: #0d0d0d;
  --surface-2: #141414;
  --rail: #5a5a5a;
  --hair: #242424;
  --text: #ffffff;
  --text-2: #eaeaea;
  --text-3: #c8c8c8;
  --text-4: #a6a6a6;
  --accent: #ffffff;
  --accent-light: #eaeaea;
  --accent-glow: rgb(255 255 255 / 0.12);
  --pink: #fcd34d;
  --green: #6ee7b7;
  --green-line: #34d399;
  --green-bg: #002619;
  --amber-line: #fbbf24;
  --focus: #c68cff;
  --link: #c68cff;
  --radius: 8px;
  --serif: var(--sans);
}

.logo { height: 26px; width: auto; display: block; }

.kicker { color: var(--text-3); }
.kicker.pink { color: var(--pink); }

.primary, .approve-btn {
  font-family: var(--sans); font-weight: 500; border-radius: var(--radius); background: #ffffff; color: #000000;
}
.primary:hover:not(:disabled), .approve-btn:hover { filter: none; opacity: 0.88; }
.ghost, .outline, .chip, input, select, .seg, .policy, .error, .money input { border-radius: var(--radius); }
.seg { overflow: hidden; }
.chip.on { color: var(--text); border-color: var(--text); background: var(--surface-2); }
.link { color: var(--link); }
input:focus-visible, select:focus-visible { border-color: var(--focus); box-shadow: 0 0 0 3px rgb(198 140 255 / 0.35); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Ada's words: Geist, upright, as the platform writes them. */
.empty-big, .say { font-family: var(--sans) !important; font-style: normal !important; font-weight: 600; letter-spacing: -0.02em; }

/* The expenses demo: approved is green, a person decides is amber. */
.dot { background: var(--green-line); box-shadow: 0 0 0 3px rgb(52 211 153 / 0.2); }
tbody tr.lit { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--text); }
td.ref i, .basis-row .ref i { color: var(--text-3); }
.pill.approve, .pill.reject { border-radius: 6px; }
.pill.approve { border-color: var(--green-line); color: var(--green); background: var(--green-bg); }
.decision { border-radius: var(--radius); }
.decision.approve { border-left-color: var(--green-line); }
.approve .mark { background: var(--green-line); }
.fill { background: var(--green-line); }
.steady { border-radius: 6px; border-color: var(--rail); color: var(--text-2); }

/* The front page's cards. */
a.card:hover { border-color: var(--text-3); }
.go { color: var(--text); }
.search input:focus { border-color: var(--focus); }