/* IncentivesRadar design system — tokens + shared components.
   Linked by the public landing (/) and the app (/app/); inlined into
   local/dashboard.html by the build. Single accent color, reserved for CTAs
   and links. Light/dark via tokens; landing follows OS, app has a toggle. */

:root {
  color-scheme: light;
  --page:#f9f9f7; --surface:#fcfcfb; --ink:#0b0b0b; --ink-2:#52514e;
  --muted:#898781; --hairline:#e1e0d9; --border:rgba(11,11,11,.10);
  --accent:#2a78d6;
  --good:#0ca30c; --warn:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --good-text:#006300;
  --chip:#f0efec;
  /* 4px spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page:#0d0d0d; --surface:#1a1a19; --ink:#ffffff; --ink-2:#c3c2b7;
  --muted:#898781; --hairline:#2c2c2a; --border:rgba(255,255,255,.10);
  --accent:#3987e5;
  --good-text:#0ca30c;
  --chip:#26262a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page:#0d0d0d; --surface:#1a1a19; --ink:#ffffff; --ink-2:#c3c2b7;
    --muted:#898781; --hairline:#2c2c2a; --border:rgba(255,255,255,.10);
    --accent:#3987e5;
    --good-text:#0ca30c;
    --chip:#26262a;
  }
}

* { box-sizing: border-box; }
body {
  margin:0; background:var(--page); color:var(--ink);
  font:16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color:var(--accent); }

/* Wordmark */
.wordmark { font-weight:700; font-size:18px; letter-spacing:-0.01em; color:var(--ink); text-decoration:none; }
.wordmark .dot { color:var(--accent); }

/* Stat tiles */
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.tile { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 14px; }
.tile .v { font-size:24px; font-weight:650; font-variant-numeric:tabular-nums; }
.tile .l { color:var(--ink-2); font-size:12.5px; margin-top:2px; }

/* Buttons */
.btn-primary {
  display:inline-block; background:var(--accent); color:#fff; text-decoration:none;
  border:none; border-radius:10px; padding:11px 20px; font:inherit; font-size:15px;
  font-weight:600; cursor:pointer;
}
.btn-primary:disabled { opacity:.55; cursor:wait; }
button.ghost {
  background:none; border:1px solid var(--border); color:var(--ink-2);
  border-radius:8px; padding:5px 10px; cursor:pointer; font:inherit; font-size:12.5px;
}
button.ghost:hover { border-color:var(--muted); }

/* Chips */
.chip {
  display:inline-block; background:var(--chip); color:var(--ink-2);
  border-radius:999px; padding:4px 12px; font-size:13px;
}

/* Cards (generic surface) */
.panel { background:var(--surface); border:1px solid var(--border); border-radius:12px; }

/* Sponsored/ad-slot seam — inert placeholder, populated by a future /api/slots.
   Contract: set textContent/innerHTML, add [data-active], remove [hidden]. */
.slot { display:none; border:1px dashed var(--hairline); border-radius:10px;
        padding:12px; color:var(--muted); font-size:12px; }
.slot[data-active] { display:block; }

/* Eyebrow section labels */
.eyebrow { font-size:12px; text-transform:uppercase; letter-spacing:.06em;
           color:var(--muted); font-weight:600; }