/* JAG Finance's look (shadcn "neutral", dark by default) with the JAG red as the brand accent.
   Red is for the brand, errors and redactions only: text boxes and info stay neutral or sky blue. */
:root {
  --font: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, 'Cascadia Code', Menlo, Consolas, monospace;

  --bg: hsl(0 0% 3.9%);
  --card: hsl(0 0% 6%);
  --raise: hsl(0 0% 8%);
  --popover: hsl(0 0% 7.5%);
  --muted: hsl(0 0% 14.9%);
  --muted-fg: hsl(0 0% 63.9%);
  --faint: hsl(0 0% 42%);
  --fg: hsl(0 0% 98%);
  --fg-2: hsl(0 0% 82%);
  --border: hsl(0 0% 100% / 11%);
  --border-2: hsl(0 0% 100% / 6%);
  --border-strong: hsl(0 0% 100% / 20%);
  --input: hsl(0 0% 100% / 12%);
  --canvas: hsl(0 0% 5%);
  --canvas-dot: hsl(0 0% 100% / 7%);
  --header: hsl(0 0% 3.9% / 80%);

  --brand: #dc2626;
  --brand-hover: #b91c1c;
  --brand-soft: hsl(0 72% 51% / 14%);
  --on-brand: #ffffff;

  --ok: #10b981; --ok-soft: hsl(160 84% 39% / 14%); --ok-ink: #34d399;
  --warn: #f59e0b; --warn-soft: hsl(38 92% 50% / 14%); --warn-ink: #fbbf24;
  --bad: #f43f5e; --bad-soft: hsl(350 89% 60% / 14%); --bad-ink: #fb7185;
  --info: #38bdf8; --info-soft: hsl(199 89% 60% / 13%); --info-ink: #7dd3fc;

  /* Boxes drawn over documents: sky blue, amber when lit up. */
  --region: hsl(199 89% 62% / 62%);
  --region-fill: hsl(199 89% 62% / 7%);
  --hl: #f59e0b;
  --hl-soft: hsl(38 92% 50% / 16%);

  /* One colour per service, as in the "how it works" explainer. */
  --svc-gateway: var(--brand);
  --svc-ocr: hsl(220 70% 60%);
  --svc-scan: hsl(340 75% 60%);
  --svc-convert: hsl(160 60% 45%);
  --svc-ai: hsl(30 80% 55%);
  --svc-search: hsl(280 65% 66%);

  --radius: 0.5rem;
  --radius-s: 0.375rem;
  --radius-l: 0.75rem;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
  --shadow-l: 0 16px 40px -12px rgb(0 0 0 / 70%);
  --ring: hsl(0 0% 83% / 55%);

  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #ffffff;
  --card: #ffffff;
  --raise: hsl(0 0% 98.5%);
  --popover: #ffffff;
  --muted: hsl(0 0% 96.1%);
  --muted-fg: hsl(0 0% 45.1%);
  --faint: hsl(0 0% 63%);
  --fg: hsl(0 0% 3.9%);
  --fg-2: hsl(0 0% 22%);
  --border: hsl(0 0% 89.8%);
  --border-2: hsl(0 0% 93.5%);
  --border-strong: hsl(0 0% 80%);
  --input: hsl(0 0% 89.8%);
  --canvas: hsl(0 0% 95%);
  --canvas-dot: hsl(0 0% 0% / 8%);
  --header: hsl(0 0% 100% / 82%);

  --brand-soft: hsl(0 72% 51% / 9%);
  --ok-soft: hsl(160 84% 39% / 11%); --ok-ink: #047857;
  --warn-soft: hsl(38 92% 50% / 14%); --warn-ink: #b45309;
  --bad-soft: hsl(350 89% 60% / 10%); --bad-ink: #be123c;
  --info: #0284c7; --info-soft: hsl(199 89% 48% / 10%); --info-ink: #0369a1;

  --region: hsl(199 89% 40% / 60%);
  --region-fill: hsl(199 89% 48% / 6%);
  --hl-soft: hsl(38 92% 50% / 18%);

  --svc-ocr: hsl(220 70% 45%);
  --svc-scan: hsl(340 70% 45%);
  --svc-convert: hsl(160 70% 30%);
  --svc-ai: hsl(30 85% 40%);
  --svc-search: hsl(280 55% 48%);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 6%);
  --shadow-l: 0 14px 34px -12px rgb(0 0 0 / 28%);
  --ring: hsl(0 0% 40% / 45%);

  color-scheme: light;
}