/*
  FlowSentry design system — "Flow" (2026-07 re-skin of the former "Ledger" theme, aligned to
  the FlowSentry Design System project: cool-slate neutrals, Flow Blue primary, generously
  rounded surfaces, soft layered shadows). Color still carries meaning first (severity ramp),
  never decoration. Single source of design tokens (CLAUDE.md §14 — one place). Light + dark
  themes via [data-theme] — dark is an original extension (the source system ships light-only)
  built from the same hues so existing users don't lose the toggle. Radzen components consume
  these tokens via the radzen-overrides.css bridge, and Tailwind utilities map to them via
  @theme in app.tailwind.css.
*/

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root,
[data-theme="light"] {
  /* Surfaces */
  --fs-canvas: #f9fafb;
  --fs-surface: #ffffff;
  --fs-surface-raised: #ffffff;
  --fs-surface-sunken: #f2f4f7;
  --fs-border: #e4e7ec;
  --fs-border-strong: #d0d5dd;

  /* Ink / text */
  --fs-text: #101828;
  --fs-text-muted: #475467;
  --fs-text-subtle: #667085;
  --fs-text-inverse: #ffffff;

  /* Brand / action — Flow Blue */
  --fs-brand-ink: #0c111d;         /* near-black, primary pill CTAs */
  --fs-brand: #18327a;
  --fs-accent: #1a4cf0;
  --fs-accent-hover: #163cc4;
  --fs-accent-soft: #eef4ff;
  --fs-focus: #2e63ff;

  /* Severity ramp — reserved for risk/alert meaning only */
  --fs-sev-low: #039855;
  --fs-sev-medium: #dc6803;
  --fs-sev-high: #f04438;
  --fs-sev-critical: #b42318;
  --fs-sev-low-soft: #ecfdf3;
  --fs-sev-medium-soft: #fffaeb;
  --fs-sev-high-soft: #fef3f2;
  --fs-sev-critical-soft: #fee4e2;

  /* Elevation — soft, low-contrast, cool-tinted */
  --fs-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 0 0 1px rgba(16, 24, 40, 0.04);
  --fs-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
  --fs-shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
}

[data-theme="dark"] {
  --fs-canvas: #0b0f17;
  --fs-surface: #121822;
  --fs-surface-raised: #171f2b;
  --fs-surface-sunken: #0d131c;
  --fs-border: #232c3a;
  --fs-border-strong: #313d4e;

  --fs-text: #e7ebf1;
  --fs-text-muted: #9aa7b6;
  --fs-text-subtle: #6b7889;
  --fs-text-inverse: #0b0f17;

  --fs-brand-ink: #060a12;
  --fs-brand: #7ba0ff;
  --fs-accent: #5a88ff;
  --fs-accent-hover: #7ba0ff;
  --fs-accent-soft: #16223d;
  --fs-focus: #5a88ff;

  --fs-sev-low: #32d583;
  --fs-sev-medium: #fdb022;
  --fs-sev-high: #f97066;
  --fs-sev-critical: #d92d20;
  --fs-sev-low-soft: #122a1f;
  --fs-sev-medium-soft: #2a2013;
  --fs-sev-high-soft: #2c1815;
  --fs-sev-critical-soft: #3a1210;

  --fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --fs-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
  --fs-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
}

:root {
  /* Type */
  --fs-font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace;
  --fs-fs-xs: 0.75rem;
  --fs-fs-sm: 0.8125rem;
  --fs-fs-base: 0.875rem;
  --fs-fs-md: 1rem;
  --fs-fs-lg: 1.125rem;
  --fs-fs-xl: 1.375rem;
  --fs-fs-2xl: 1.75rem;
  --fs-lh-tight: 1.15;
  --fs-lh-base: 1.5;

  /* Spacing (4px base) */
  --fs-space-1: 0.25rem;
  --fs-space-2: 0.5rem;
  --fs-space-3: 0.75rem;
  --fs-space-4: 1rem;
  --fs-space-5: 1.5rem;
  --fs-space-6: 2rem;
  --fs-space-8: 3rem;

  /* Radius / metrics — generously rounded, full-pill actions */
  --fs-radius-sm: 8px;
  --fs-radius-md: 12px;
  --fs-radius-lg: 16px;
  --fs-radius-xl: 20px;
  --fs-radius-pill: 999px;
  --fs-appbar-h: 64px;
  --fs-sidebar-w: 244px;
  --fs-sidebar-w-collapsed: 64px;
  --fs-row-h: 40px;
  --fs-content-max: 1440px;

  /* Motion + focus */
  --fs-transition: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --fs-transition-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --fs-ring: 0 0 0 4px rgba(46, 99, 255, 0.18);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--fs-font-sans);
  font-size: var(--fs-fs-base);
  line-height: var(--fs-lh-base);
  color: var(--fs-text);
  background: var(--fs-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Figures, identifiers, amounts, timestamps read in mono for financial precision. */
.fs-mono,
.fs-figure {
  font-family: var(--fs-font-mono);
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: var(--fs-lh-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--fs-space-3);
}

a {
  color: var(--fs-accent);
  text-decoration: none;
}

a:hover {
  color: var(--fs-accent-hover);
}

:focus-visible {
  outline: 2px solid var(--fs-focus);
  outline-offset: 2px;
}

/* Authenticator QR — server-rendered inline SVG (QRCoder) sized to a fixed box. */
.fs-qr {
  width: 190px;
  height: 190px;
  padding: var(--fs-space-2);
  background: #ffffff; /* QR must stay high-contrast regardless of theme */
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius-md);
}

.fs-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}