/* Copied from prototypes/shared/theme.css (approved in A-02). Keep both in sync. */
/*
 * Approved identity and theme tokens (A-02, design E), shared by the admin
 * dashboard (dashboard-kit.css) and the researcher app (app-kit.css).
 * The brand palette changes identity, buttons and active states only;
 * chart and status colors stay fixed so they remain distinct.
 * Brand options: violet (default), teal, brown — set on <html data-brand>.
 */

:root {
  /* Secondary brand colour (Phase 0 §3): badges, counters and progress. The saved
     colours replace these from Settings → Appearance (style on <html>). */
  --brand2: #00afa0;
  --brand2-soft: #ddf8f3;
  --brand2-text: #00796f;
  --brand2-ink: #04312c;
  --dk-bg: #f4f7fb;
  --dk-surface: #ffffff;
  --dk-surface-muted: #f6f8fb;
  --dk-border: #edf1f6;
  --dk-text: #1e2a3b;
  --dk-muted: #6b7789;
  --dk-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 4px 14px rgba(16, 24, 40, 0.04);
  --dk-gap: 24px;
  --dk-pad: 24px;
  --dk-radius: 16px;
  --dk-header-h: 76px;
  --dk-sidebar-w: 256px;
  --dk-control-h: 34px;

  /* Brand: violet (default) */
  --brand: #635bff;
  --brand-soft: #eae8ff;
  --brand-ink: #ffffff;   /* text on --brand */
  --brand-text: #5248e0;  /* brand-colored text on white or --brand-soft */

  /* Pastel stat tones */
  --tone-blue-bg: #eaf2ff;   --tone-blue: #2a78d6;
  --tone-green-bg: #e6f7ef;  --tone-green: #12845a;
  --tone-orange-bg: #fff1e6; --tone-orange: #cc5520;
  --tone-pink-bg: #fdedf3;   --tone-pink: #c13f6c;

  /* Chart series (validated with validate_palette.js against #ffffff) */
  --s-blue: #2a78d6;
  --s-red: #e34948;
  --s-yellow: #eda100;
  --s-aqua: #1baf7a;
  --s-orange: #eb6834;
  --grid: #eef1f6;
  --axis: #dde3ec;

  /* Shared component tokens */
  --color-bg: var(--dk-bg);
  --color-surface: var(--dk-surface);
  --color-surface-muted: var(--dk-surface-muted);
  --color-border: var(--dk-border);
  --color-text: var(--dk-text);
  --color-text-muted: var(--dk-muted);
  --color-primary: var(--brand-text);
  --color-primary-contrast: #ffffff;
}
:root[data-brand="teal"] {
  --brand: #00afa0;
  --brand-soft: #ddf8f3;
  --brand-ink: #04312c;   /* white on #00afa0 is only 2.75:1 */
  --brand-text: #00796f;
}
:root[data-brand="brown"] {
  --brand: #8b4513;
  --brand-soft: #f5e7dc;
  --brand-ink: #ffffff;
  --brand-text: #8b4513;
}
:root:lang(ar) { --font-body: "Cairo", "Segoe UI", Tahoma, "Geeza Pro", sans-serif; }