/* ── publyq design tokens ────────────────────────────────────────────────
   Direction: a civic *instrument*. Graphite canvas, one brand accent (marina
   teal), a disciplined semantic ramp used only for status. Type pairs a
   characterful display grotesk with a neutral UI face and a mono data face. */
:root {
  /* neutrals (dark default) */
  --canvas: #0d1117;
  --surface: #151b23;
  --raised: #1c242e;
  --sunken: #0a0e13;
  --line: #222c37;
  --line-2: #313d4b;
  --fg: #e8eef4;
  --fg-muted: #9baab9;
  --fg-faint: #61707e;

  /* brand — marina teal */
  --brand: #17bea6;
  --brand-hi: #34d8c4;
  --brand-deep: #0e8a7d;
  --brand-tint: rgba(23, 190, 166, 0.14);

  /* semantic status ramp (data only) */
  --pos: #3fb950;
  --warn: #e8a13c;
  --crit: #ff5d5d;
  --info: #4ea8ff;

  --pos-tint: rgba(63, 185, 80, 0.14);
  --warn-tint: rgba(232, 161, 60, 0.14);
  --crit-tint: rgba(255, 93, 93, 0.14);
  --info-tint: rgba(78, 168, 255, 0.14);

  /* type */
  --display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* geometry + motion */
  --r: 14px;
  --r-sm: 10px;
  --r-xs: 8px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 28px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.5);
  --ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--brand);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --maxw: 1220px;
}

:root[data-theme='light'] {
  --canvas: #f6f8fa;
  --surface: #ffffff;
  --raised: #f0f3f6;
  --sunken: #eaeef2;
  --line: #e3e8ee;
  --line-2: #cfd8e1;
  --fg: #0f1720;
  --fg-muted: #55636f;
  --fg-faint: #8593a0;
  --brand: #0e9a8b;
  --brand-hi: #12b3a1;
  --brand-deep: #0b7d71;
  --brand-tint: rgba(14, 154, 139, 0.1);
  --pos: #1f9d4d;
  --warn: #c9821f;
  --crit: #e4443f;
  --info: #2b7fd6;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 10px 30px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 24px 60px rgba(16, 24, 40, 0.18);
  --ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--brand);
}

/* Tamil script gets Anek Tamil when the language is toggled */
:root[data-lang='ta'] {
  --display: 'Anek Tamil', 'Bricolage Grotesque', sans-serif;
  --body: 'Anek Tamil', 'Inter', sans-serif;
}