/* IncentivesRadar design system — "Ledger" (owner-approved 2026-08-20).
   Tokens + shared components. Linked by the public landing (/) and the app
   (/app/); inlined into local/dashboard.html by the build.
   Color discipline: --accent (deep green) is THE brand + interactive color
   (links, CTAs, selected states, wayfinding). --warn amber = closing/urgency,
   --critical red = deadlines, everything else stays warm-neutral. Display
   face: Bricolage Grotesque (pages must include the Google Fonts link;
   offline builds fall back to the system stack). */

:root {
  color-scheme: light;
  --page:#f6f5f2; --surface:#fdfcfa; --surface-2:#ffffff;
  --ink:#26241f; --ink-2:#6e685e;
  --muted:#98928a; --hairline:#e2dfd8; --border:#e6e2da;
  --accent:#1e6b4a; --accent-2:#1e6b4a;
  --accent-soft:#e7f1ec;
  --good:#2e9e63; --warn:#b07314; --serious:#c26a3f; --critical:#a83a2e;
  --good-text:#1e6b4a;
  --chip:#eceae4;
  --shadow-1:0 1px 2px rgba(38,32,20,.05), 0 2px 8px rgba(38,32,20,.05);
  --shadow-2:0 2px 6px rgba(38,32,20,.07), 0 8px 24px rgba(38,32,20,.08);
  --edge-hi:rgba(255,255,255,0);
  --glow:rgba(30,107,74,.06);
  --r2:10px; --r3:14px;
  --font-disp:"Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* 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:#171613; --surface:#1f1e19; --surface-2:#24221c;
  --ink:#ece9e2; --ink-2:#9a948a;
  --muted:#6f6a60; --hairline:#29271f; --border:#2e2c26;
  --accent:#45b380; --accent-2:#45b380;
  --accent-soft:#1d2b23;
  --good:#45b380; --warn:#d99a3c; --serious:#cf7d4e; --critical:#e06552;
  --good-text:#45b380;
  --chip:#26241d;
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 4px 16px rgba(0,0,0,.55);
  --edge-hi:rgba(255,255,255,.05);
  --glow:rgba(69,179,128,.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page:#171613; --surface:#1f1e19; --surface-2:#24221c;
    --ink:#ece9e2; --ink-2:#9a948a;
    --muted:#6f6a60; --hairline:#29271f; --border:#2e2c26;
    --accent:#45b380; --accent-2:#45b380;
    --accent-soft:#1d2b23;
    --good:#45b380; --warn:#d99a3c; --serious:#cf7d4e; --critical:#e06552;
    --good-text:#45b380;
    --chip:#26241d;
    --shadow-1:0 1px 2px rgba(0,0,0,.5);
    --shadow-2:0 4px 16px rgba(0,0,0,.55);
    --edge-hi:rgba(255,255,255,.05);
    --glow:rgba(69,179,128,.08);
  }
}

* { box-sizing: border-box; }
body {
  margin:0; color:var(--ink);
  background:var(--page) radial-gradient(1100px 480px at 50% -120px, var(--glow), transparent) no-repeat;
  font:16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color:var(--accent); }

/* Category icons (in-document SVG sprite; stroke follows currentColor) */
.cat-ic { width:18px; height:18px; flex:none; vertical-align:-3px; }

/* Wordmark */
.wordmark { font-family:var(--font-disp); 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:var(--r2);
        padding:12px 14px; box-shadow:var(--shadow-1), inset 0 1px 0 var(--edge-hi); }
.tile .v { font-family:var(--font-disp); 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:11px; padding:11px 20px; font:inherit; font-size:15px;
  font-weight:600; cursor:pointer; font-family:var(--font-disp);
}
.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:var(--r3); }

/* 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(--accent-2); font-weight:650; }

/* Toasts (app polish) */
#toastBox { position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
            display:flex; flex-direction:column; gap:8px; z-index:99; align-items:center; }
.toast { background:var(--ink); color:var(--page); border-radius:10px; padding:10px 18px;
         font-size:13.5px; box-shadow:var(--shadow-2); animation:toastin .18s ease-out;
         max-width:480px; text-align:center; }
.toast.err { background:var(--critical); color:#fff; }
@keyframes toastin { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }