/* SLATE — shared design tokens
 *
 * Loaded by every surface that renders SLATE UI: the dashboard
 * (via dashboard.html), the toolbar popup (via popup.html), the
 * candidate detail page (via candidate.html), and the content
 * scripts that inject the score panel into LinkedIn (via the
 * manifest's content_scripts.css).
 *
 * Everything here is a token, not a component style. Component
 * styles live in their surface's own CSS file and reference these.
 */

/* `:root` covers the dashboard, popup, and candidate pages — each is
 * its own extension HTML document so there is no LinkedIn CSS to
 * collide with. `#slate-panel` scopes the same tokens to the content-
 * script panel element on LinkedIn, so if LinkedIn ever sets any of
 * these names on its own :root we still read our own values on our
 * own subtree. */
:root, #slate-panel {
  /* Palette */
  --bone: #F3F6F5;        /* page background, cards, panel background */
  --ink: #0E2422;         /* primary text, sidebar, primary buttons */
  --umber: #42524F;       /* secondary text on bone */
  --tan: #D7E1DE;         /* 1px borders and dividers, P2 fill */
  --amber: #3FCFAE;       /* fill only — P1 badges and the brand mark */
  --amber-deep: #11745F;  /* links and focus outlines on bone */
  --bone-shade: #E8EEEC;  /* table row hover / selected */
  --moss: #11745F;        /* "live" status text (Active sequence) */
  --moss-soft: #D3F2EA;   /* "live" status fill */
  --rust: #94501C;        /* "held" status text (Paused, limits hit) */
  --rust-soft: #F0DCC6;   /* "held" status fill */
  --danger: #A33A2A;      /* the Danger zone only: deleting things */

  /* Type */
  --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Radii */
  --r-control: 6px;
  --r-badge: 4px;
  --r-panel: 8px;
  --r-card: 10px;
}