/* ew-tokens.css -- SDK baseline declaration of the --ew-* chrome/field/geometry contract and the
   input-border color tokens. Consumed-but-previously-undeclared tokens get a declared :root default
   here so they are documented + themeable; brand-tied values (sidebar colors) are still overridden
   per tenant in the palette file. Plain-ASCII only. Most values equal the components' prior hardcoded
   fallbacks; the field/input BORDER colors are reconciled to Radzen's native input border
   (--rz-input-border = --rz-border-normal = base-600; hover = base-700) so SDK inputs match native
   Radzen inputs, and the field RADIUS is reconciled to the native input radius (--rz-input-border-radius). */
:root {
  /* Input borders: the SDK's phone/zip inputs consume the -color variants (the licensed base ships only
     the `--rz-input-border` shorthand, not the -color split). Point them at the SAME base shades Radzen's
     native --rz-border-normal / --rz-border-hover use -- base-600 resting, base-700 hover -- so SDK inputs
     match native Radzen inputs and re-skin with the palette. */
  --rz-input-border-color: var(--rz-base-600, #c6cbd2);
  --rz-input-hover-border-color: var(--rz-base-700, #74797e);

  /* Chrome -- top bar */
  --ew-topbar-height: 56px;
  --ew-topbar-bg: var(--rz-base-50, #f8fafb);
  --ew-topbar-fg: var(--rz-text-color, #1b1d20);
  --ew-topbar-border: var(--rz-base-300, #dfe5ec);

  /* Chrome -- sidebar text/affordances (sidebar-1/2 brand colors come from the palette).
     Defaults below are tuned for the dark navy sidebar. */
  --ew-sidebar-text: #b8c5dc;
  --ew-sidebar-text-muted: #7b8aa8;
  --ew-sidebar-text-hover: #ffffff;
  --ew-sidebar-border: rgba(255, 255, 255, 0.06);
  --ew-sidebar-item-hover: rgba(255, 255, 255, 0.06);
  --ew-sidebar-active-bg: rgba(255, 255, 255, 0.12);
  --ew-sidebar-active-text: #ffffff;
  --ew-sidebar-count-bg: rgba(255, 255, 255, 0.10);
  --ew-sidebar-panel-bg: var(--ew-sidebar-1, #0e1a46);

  /* Geometry -- reconcile radii to the Radzen scale (was 12/6/8 drift). */
  --ew-card-radius: var(--rz-card-border-radius, 12px);
  --ew-field-radius: var(--rz-input-border-radius, 4px);
  --ew-icon-size: 1.125rem;
  --ew-kpi-min: 200px;

  /* Form field surfaces */
  --ew-field-bg: var(--rz-base-lighter, #ffffff);
  --ew-field-border: var(--rz-input-border-color, #c6cbd2);
  --ew-field-border-hover: var(--rz-input-hover-border-color, #74797e);
  --ew-field-focus-ring: var(--rz-primary-lighter, rgba(0, 74, 242, 0.12));
  --ew-field-bg-disabled: var(--rz-base-200, #e3eaf2);
  --ew-field-border-disabled: var(--rz-base-300, #dfe5ec);

  /* Typography -- the heading voice. Headings/display/KPI numbers render in Avenir Next
     (ew-ui.css applies this token); body/forms/grids stay Roboto Flex via --rz-text-font-family. */
  --ew-heading-font-family: 'Avenir Next', Roboto, sans-serif;

  /* Sidebar active-item indicator bar (EwSidebarNav). Default follows the active text color
     (the pre-theme behavior); brand palettes override it (Royal Scholar: azure #008cff;
     Slate & Sky: transparent -- its actives are pills, no bar). */
  --ew-sidebar-active-indicator: var(--ew-sidebar-active-text, var(--rz-primary, #004af2));

  /* Outlined-button border: the M3 outline role (~3:1 boundary on the scheme surface).
     Light = base-700; material3-dark-overrides points it at the dark outline equivalent. */
  --ew-button-outline: var(--rz-base-700, #74797e);

  /* App-shell content canvas (EwAppShell .ew-app-content). A dedicated SURFACE token because
     the dark ramp inverts the base steps -- raw base-100 backgrounds break in dark; the dark
     overrides point this at the deepest dark surface so cards read elevated above it. */
  --ew-content-bg: var(--rz-base-100, #f3f6f9);
}