/* Design tokens -- the single source of truth for this app's palette.
   =====================================================================

   Every signed-in page links this file. Public/marketing pages (home,
   /offering, waiver-sign, privacy, terms, the share and invite-accept
   flows) deliberately do NOT, which is what keeps them on the older blue
   look while the app behind the login moves to this one.

   That split is why the shared partials used by both audiences
   (shared/tabs.css, shared/status-badge.css, shared/header.js, ...) never
   name a colour directly. They reference `var(--accent-strong, #0b4cb8)`:
   pages that link this file resolve the token and render indigo, pages
   that don't fall through to the literal and render exactly what they
   rendered before. Adding a page to the new look is therefore a one-line
   change -- link this file -- and never a find-and-replace.

   Before this file existed the five core tokens were copy-pasted into a
   `:root` block in each of 24 pages, which had already drifted (four
   different values for --bg, three for --ink). Pages that still declare
   their own block override what's here, since both are `:root` and the
   page's <style> comes later in the cascade -- so a page is only really
   on this palette once its local block is gone. */

:root {
  /* --- Type -------------------------------------------------------- */
  /* Every page wrote `font-family: Inter, sans-serif`, but four of them
     (checkin, entries, entry-list, offerings) never loaded the Inter webfont,
     so they fell through to the platform sans and rendered in a visibly
     different face from the dashboards beside them. The stack lives here, and
     the fallbacks are now a real list rather than bare `sans-serif`, so a page
     that fails to fetch the webfont degrades to the platform UI font instead
     of to Helvetica. */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Row typography, shared by the list and table rows on every dashboard.
     These were the browser defaults in places (16px titles next to 13px body),
     which read as a font change rather than a size change. */
  --text-row-title: 13.5px;
  --text-row-meta: 11.5px;

  /* --- Surfaces ---------------------------------------------------- */
  /* The page sits on a tinted slate, not white: it's what lets an
     unboxed dashboard read as a page of content rather than a stack of
     floating cards, and what makes a white card register as raised
     without needing a shadow. */
  --bg: #eef2f7;
  --panel: #ffffff;
  /* Table headers, inset strips -- one step off white, no border needed. */
  --panel-subtle: #f8fafc;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;

  /* --- Text -------------------------------------------------------- */
  /* Three weights, not two. --muted is body copy and stays at the same
     value it had before this file (#475569, ~7:1 on white); --faint is
     the new one, reserved for uppercase micro-labels and row meta where
     the text is small, short, and always paired with a stronger value
     next to it. Don't use --faint for sentences. */
  --ink: #1e293b;
  --muted: #475569;
  --faint: #94a3b8;

  /* --- Brand accent ------------------------------------------------ */
  /* Two indigos on purpose. --accent is for fills, active bars and icon
     glyphs, where it sits under white or beside a tint. --accent-strong
     is for anything that has to be *read* on white -- link text, button
     backgrounds -- because --accent is only ~3.9:1 against white and
     fails WCAG AA for body-sized text. When in doubt, text gets
     --accent-strong. */
  --accent: #6366f1;
  --accent-strong: #4f46e5;
  --accent-bg: #eef2ff;
  --accent-line: #c7d2fe;
  --accent-text: #3730a3;

  /* --- Sidebar ----------------------------------------------------- */
  /* The sidebar is the one dark surface in the app, so it carries its own
     scale rather than reusing the light-surface tokens inverted. */
  --sidebar-bg: #0f172a;
  --sidebar-line: rgba(255, 255, 255, 0.07);
  --sidebar-text: #94a3b8;
  --sidebar-text-hover: #cbd5e1;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.05);
  --sidebar-active-bg: rgba(99, 102, 241, 0.18);
  --sidebar-active-text: #ffffff;

  /* --- Semantic accent ramps --------------------------------------- */
  /* Each ramp is a triple: a saturated value for rules and icons, a tint
     for fills, and a dark value for text on that tint. Stat cards pick a
     ramp per metric and badges pick one per status, so a colour means the
     same thing in both places. */
  --emerald: #10b981;
  --emerald-bg: #ecfdf5;
  --emerald-text: #065f46;
  --emerald-line: #a7f3d0;

  --violet: #8b5cf6;
  --violet-bg: #f5f3ff;
  --violet-text: #5b21b6;
  --violet-line: #ddd6fe;

  --amber: #f59e0b;
  --amber-bg: #fffbeb;
  --amber-text: #92400e;
  --amber-line: #fde68a;

  --sky: #0ea5e9;
  --sky-bg: #f0f9ff;
  --sky-text: #075985;
  --sky-line: #bae6fd;

  --rose: #f43f5e;
  --rose-bg: #fff1f2;
  --rose-text: #9f1239;
  --rose-line: #fecdd3;

  /* --- Shape ------------------------------------------------------- */
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-pill: 999px;

  /* --- Button metrics ---------------------------------------------- */
  /* Buttons are the most-duplicated component in this app: nearly every page
     declares its own .btn, and they had drifted apart on all four of these
     (radius 8/9/10/12, weight 600/700/800, and four different paddings), so
     two buttons doing the same job looked like different controls depending
     on which page you were on. The classes stay per-page -- JS and tests
     select them -- but they now agree on these values. */
  --btn-radius: 8px;
  --btn-padding: 9px 14px;
  --btn-font-size: 13px;
  --btn-font-weight: 600;
}