/* JARVIS design tokens. Brand palette and type from the JARVIS Ascend mark (locked 2026-11-07): navy, blue, teal, cyan and
   slate, set in Plus Jakarta Sans. The layout keeps the light page with navy bars as the default look; data-theme="dark"
   is the optional dark variant. Use these variables, not raw hex, in app.css. The derived shades are not brand colours:
   they are darker or lighter steps chosen so text on them meets WCAG AA (tests/web/contrast.test.mjs). */
:root {
  /* Brand set. */
  --jv-navy: #0B1320;
  --jv-blue: #2563EB;
  --jv-teal: #14B8A6;
  --jv-cyan: #22D3EE;
  --jv-slate: #94A3B8;
  --jv-ink-on-dark: #FFFFFF;
  --jv-font-headline: "Plus Jakarta Sans", "Avenir Next", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --jv-font-body: "Plus Jakarta Sans", "Avenir Next", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --jv-headline-weight: 700;
  --jv-headline-tracking: -0.02em;

  /* Derived shades and status colours. */
  --jv-navy-2: #152036;
  --jv-navy-3: #070C15;
  --jv-teal-deep: #0F766E;
  --jv-slate-deep: #475569;
  --jv-page: #F1F5F9;
  --jv-amber: #F56E2C;
  --jv-danger-bg: #FAECEC;
  --jv-danger-ink: #B02A2A;
  --jv-ok-bg: #E2F4F1;
  --jv-ok-ink: #0F766E;

  /* Light theme, the default. */
  color-scheme: light;
  --bg: var(--jv-page);
  --card: #FFFFFF;
  --card-2: var(--jv-page);
  --text: var(--jv-navy);
  --text-muted: var(--jv-slate-deep);
  --label: var(--jv-teal-deep);
  --link: var(--jv-blue);
  --border: rgba(37, 99, 235, 0.22);
  --border-strong: rgba(37, 99, 235, 0.4);
  --zone-line: rgba(37, 99, 235, 0.18);
  --row-hover: rgba(37, 99, 235, 0.035);
  --ring: rgba(37, 99, 235, 0.16);
  --bar-bg: var(--jv-navy);
  --bar-ink: #FFFFFF;
  --bar-muted: var(--jv-slate);
  --bar-label: var(--jv-teal);
  --bar-line: rgba(255, 255, 255, 0.18);
  --nav-active: color-mix(in srgb, var(--jv-teal) 18%, var(--jv-navy));
  --action: var(--jv-blue);
  --action-ink: #FFFFFF;
  --focus: var(--jv-blue);
  --hb-ok: #15803D;
  --hb-warn: #B45309;
  --hb-bad: #B91C1C;
  --danger-bg: var(--jv-danger-bg);
  --danger-ink: var(--jv-danger-ink);
  --ok-bg: var(--jv-ok-bg);
  --ok-ink: var(--jv-ok-ink);
  --warn-bg: #FFF1E8;
  --warn-ink: #9A3F0F;
  --track: rgba(37, 99, 235, 0.14);
  --shadow-1: 0 1px 2px rgba(11, 19, 32, 0.05);
  --shadow-2: 0 18px 48px rgba(11, 19, 32, 0.28);
  --scrim: rgba(11, 19, 32, 0.55);

  --r-card: 18px;
  --r-tile: 16px;
  --r-sm: 8px;
  --r-pill: 50px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --gutter: 14px;
  --bubble: 56px; /* the chat bubble, and the room the page keeps for it at the bottom */
  --kill-ink: #FFB3B8;
  --topbar-h: 56px;
  --tap: 44px;
  --pad-card: 16px;
  --pad-head: 12px;
  --pad-cell: 9px;
  --chat-w: 400px;
}
@media (min-width: 700px) { :root { --gutter: 24px; } }
@media (min-width: 1100px) { :root { --gutter: 32px; } }

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--jv-navy);
  --card: var(--jv-navy-2);
  --card-2: var(--jv-navy-3);
  --text: #FFFFFF;
  --text-muted: var(--jv-slate);
  --label: var(--jv-teal);
  --link: var(--jv-cyan);
  --border: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.32);
  --zone-line: rgba(255, 255, 255, 0.14);
  --row-hover: rgba(255, 255, 255, 0.05);
  --ring: rgba(34, 211, 238, 0.25);
  --bar-bg: var(--jv-navy-3);
  --focus: var(--jv-cyan);
  --hb-ok: #4ADE80;
  --hb-warn: #FBBF24;
  --hb-bad: #F87171;
  --danger-bg: color-mix(in srgb, #F0707A 18%, var(--jv-navy-2));
  --danger-ink: #FFB3B8;
  --ok-bg: color-mix(in srgb, var(--jv-teal) 16%, var(--jv-navy-2));
  --ok-ink: var(--jv-teal);
  --warn-bg: color-mix(in srgb, var(--jv-amber) 18%, var(--jv-navy-2));
  --warn-ink: #FFC29E;
  --track: rgba(255, 255, 255, 0.16);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 18px 48px rgba(0, 0, 0, 0.55);
  --scrim: rgba(5, 9, 15, 0.7);
}

/* Compact density (account menu, Preferences): the same layout with less air in cards, headers and table cells. */
:root[data-density="compact"] { --pad-card: 10px; --pad-head: 8px; --pad-cell: 5px; }