/* Kyrios panelist redesign — design tokens (v4)
   Palette and type lifted directly from kyrios.online's own CSS custom
   properties, so the app matches the marketing site. Import once at the
   app root; components reference variables, never raw hex. */

:root {
  /* --- text --- */
  --ink:       #13203a;  /* primary text (navy ink) */
  --ink-soft:  #44506a;  /* secondary text */
  --ink-faint: #6e7888;  /* tertiary text, icons at rest */
  --ink-ghost: #9aa3b2;  /* placeholders, disabled */

  /* --- action: the ONLY interactive color --- */
  --blue:      #2f56f0;  /* primary buttons, active nav, progress */
  --blue-deep: #1e3cc4;  /* primary hover */
  --blue-text: #2540c8;  /* text-sized blue (links, titles) — passes AA */
  --blue-soft: #eaeeff;  /* selected/nudge backgrounds, poll fills */
  --blue-line: #d5ddfb;  /* border that pairs with --blue-soft */

  /* --- support colors (from the marketing site) --- */
  --sage:      #1c8c72;  /* positive: match %, credited, instant-qual */
  --sage-soft: #e2f1eb;
  --coral:      #f2553c; /* urgency: unread dots, closing-soon */
  --coral-text: #c93a24; /* text-sized coral for pills */
  --coral-soft: #ffe6e0;
  --butter:      #ffc53d; /* money accent: meters, highlights */
  --butter-deep: #b07d12; /* text-sized gold: balances, payouts */
  --butter-soft: #fff1cc; /* task banners, in-review pills */

  /* --- surfaces --- */
  --ground: #f5f3ee;  /* app background (paper) */
  --card:   #ffffff;  /* card surface */
  --line:   #e7e3d9;  /* borders, dividers */

  /* --- type (same stack as kyrios.online) --- */
  --font-ui: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif:   "Instrument Serif", Georgia, "Times New Roman", serif;   /* italic accent words only */
  --mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* eyebrows, labels, table headers, denominations */

  /* --- shape & elevation (site values) --- */
  --radius-card: 16px;
  --radius-tile: 10px;
  --radius-pill: 999px;
  --shadow-card: 0 10px 30px -24px rgba(19, 32, 58, .18);
}

/* Usage rules:
   - Money is ALWAYS butter-deep text (scan-for-gold convention).
   - Sage/coral/butter are semantic only — never decoration.
   - Serif is italic accent words inside sans headings, never body text. */

.money { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }