/* HAQQ design system tokens (from haqq-ai-next/libs/web-brand/src/index.css). Light mode only. */
:root {
  --bg: hsl(40 33% 98%);            /* paper */
  --fg: hsl(0 0% 9%);
  --card: hsl(0 0% 100%);
  --muted: hsl(40 25% 95%);
  --muted-fg: hsl(0 0% 38%);
  --faint: hsl(0 0% 52%);
  --border: hsl(40 16% 88%);
  --border-strong: hsl(40 12% 78%);

  --primary: hsl(330 98% 21%);      /* Tyrian purple #66023C family */
  --primary-fg: #fff;
  --primary-600: hsl(330 95% 17%);
  --primary-700: hsl(330 96% 14%);
  --primary-300: hsl(330 40% 46%);
  --primary-100: hsl(330 27% 71%);
  --primary-50: hsl(330 24% 94%);   /* soft tint for fills */
  --secondary: hsl(216 100% 21%);   /* royal blue #002C6C */
  --secondary-400: hsl(216 70% 35%);
  --secondary-50: hsl(216 40% 94%);
  --grad: linear-gradient(200deg, #66023C 18%, #002C6C 72%);
  --grad-soft: linear-gradient(160deg, hsl(330 98% 21% / .08), hsl(216 100% 21% / .12));

  --ok: hsl(142 60% 28%);   --ok-bg: hsl(142 50% 94%);
  --warn: hsl(30 90% 32%);  --warn-bg: hsl(38 95% 92%);
  --bad: hsl(0 72% 45%);    --bad-bg: hsl(0 80% 96%);
  --info: hsl(216 70% 35%); --info-bg: hsl(216 60% 95%);

  /* section / node state colours (map to the above) */
  --st-edited: var(--info);   --st-edited-bg: var(--info-bg);
  --st-pending: var(--warn);  --st-pending-bg: var(--warn-bg);
  --st-flagged: var(--bad);   --st-flagged-bg: var(--bad-bg);
  --st-conflict: var(--bad);  --st-conflict-bg: var(--bad-bg);
  --st-comment: var(--secondary); --st-comment-bg: var(--secondary-50);

  --radius: 12px; --radius-sm: 8px; --radius-lg: 16px;
  --font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --shadow-sm: 0 1px 2px hsl(0 0% 9% / .06), 0 1px 3px hsl(0 0% 9% / .06);
  --shadow-md: 0 6px 16px hsl(0 0% 9% / .09);
  --shadow-lg: 0 16px 40px hsl(0 0% 9% / .16);
  --ring: 0 0 0 3px hsl(330 98% 21% / .22);

  --topbar-h: 60px; --nav-w: 72px; --rail-w: 380px;
}