/*
  Radzen → Flow token bridge.
  Radzen ships with `material-base.css` (structural, variable-driven). Instead of using Radzen's own
  colour theme or its runtime ThemeService, we map the handful of `--rz-*` variables that carry colour,
  type, and radius onto the Flow `--fs-*` tokens. `[data-theme]` lives on <html> (see js/theme.js for
  why: a custom property that references another custom property resolves at its *declaring*
  element's scope and inherits down already-resolved, so the toggle has to live at `:root` itself —
  the same scope every `:root`-declared chain, including Radzen's own internal ones, is anchored to.
  A single override block here makes every Radzen component follow the platform-wide light/dark
  toggle with zero JS (CLAUDE.md §14 — one source of design truth).
*/

:root {
  /* Surfaces & backgrounds */
  --rz-base-background-color: var(--fs-canvas);
  --rz-body-background-color: var(--fs-canvas);
  --rz-content-background-color: var(--fs-surface);
  --rz-panel-background-color: var(--fs-surface);
  --rz-card-background-color: var(--fs-surface);
  --rz-base: var(--fs-surface);

  /* Text / ink */
  --rz-text-color: var(--fs-text);
  --rz-body-color: var(--fs-text);
  --rz-text-secondary-color: var(--fs-text-muted);
  --rz-text-tertiary-color: var(--fs-text-subtle);
  --rz-text-disabled-color: var(--fs-text-subtle);
  --rz-text-title-color: var(--fs-text);

  /* Primary / accent action colour */
  --rz-primary: var(--fs-accent);
  --rz-primary-light: var(--fs-accent-hover);
  --rz-primary-dark: var(--fs-accent-hover);
  --rz-primary-lighter: var(--fs-accent-soft);
  --rz-on-primary: var(--fs-text-inverse);
  --rz-secondary: var(--fs-brand);

  /* Semantic ramp — bound to the domain severity colours */
  --rz-success: var(--fs-sev-low);
  --rz-success-lighter: var(--fs-sev-low-soft);
  --rz-info: var(--fs-accent);
  --rz-info-lighter: var(--fs-accent-soft);
  --rz-warning: var(--fs-sev-medium);
  --rz-warning-lighter: var(--fs-sev-medium-soft);
  --rz-danger: var(--fs-sev-critical);
  --rz-danger-lighter: var(--fs-sev-critical-soft);

  /* Borders, radius, focus */
  --rz-border-color: var(--fs-border);
  --rz-border: 1px solid var(--fs-border);
  --rz-border-radius: var(--fs-radius-md);
  --rz-card-border-radius: var(--fs-radius-lg);
  --rz-outline-color: var(--fs-focus);

  /* Typography */
  --rz-text-font-family: var(--fs-font-sans);
  --rz-body-font-family: var(--fs-font-sans);
  --rz-text-font-size: var(--fs-fs-base);

  /* Elevation */
  --rz-shadow-1: var(--fs-shadow-sm);
  --rz-shadow-2: var(--fs-shadow-md);
  --rz-shadow-3: var(--fs-shadow-lg);

  /*
    Categorical chart palette (RadzenChart series). Distinct, brand-aligned hues for typology/category
    series — deliberately NOT the severity ramp (severity colours carry risk meaning and are applied
    explicitly where they mean something). Tuned to read on both light and dark surfaces.
  */
  --rz-series-1: #1a4cf0; /* Flow Blue    */
  --rz-series-2: #6938ef; /* violet       */
  --rz-series-3: #0e9384; /* teal         */
  --rz-series-4: #dc6803; /* amber        */
  --rz-series-5: #039855; /* emerald      */
  --rz-series-6: #be185d; /* magenta      */
  --rz-series-7: #475467; /* slate        */
  --rz-series-8: #7a5af8; /* light violet */
}

/* Radzen renders its overlay/dialog/notification host into <body>; keep it on the Flow canvas. */
.rz-dialog,
.rz-notification,
.rz-tooltip-content {
  font-family: var(--fs-font-sans);
}

/* Full-pill buttons — the design system's signature confident CTA shape. Radzen's own
   `--rz-border-radius` is shared with cards/inputs (kept moderate via the Ledger bridge above),
   so buttons get an explicit override rather than widening that shared token. */
.rz-button {
  border-radius: var(--fs-radius-pill);
}