/* Copied verbatim from the WebLeap panel (packages/shared/src/ui/tokens.css).
 * The engine and the panel share one design; this file is kept in sync BY HAND.
 * Do not edit it here. Change it in the panel repo and copy it across.
 * Engine-only additions belong in engine.css.
 */
/* WebLeap panel: the Signal design tokens.
 *
 * Chosen on 13 Sep 2026 from four lab directions (Zentra-inspired), then reshaped after
 * review: a floating light-grey sidebar and a floating content panel on a grey ground with
 * space on all four sides (the hPanel frame), black pill for the active nav row, Hanken
 * Grotesk for everything readable and Poppins for the small labels. No monospace anywhere.
 *
 * ON :root, and on nothing else, as of the end of the rollout. Two consumers need these tokens and
 * :root reaches both:
 *
 *   the panel's own wl-* classes, and
 *   the ~237 inline `style={{ background: 'var(--surface)' }}` surfaces, which resolve only the
 *   --hatch-* aliases that theme.css's bridge block re-points at these. A token that is not on
 *   :root is invisible to those.
 *
 * The selector list used to carry `.wl-root` as well, for the /design preview, which mounted its
 * own document-less shell. That preview is gone, and the screens that still wear .wl-root
 * themselves (Login, the public onboarding form, the preview build page, the visual editor) are
 * all inside the same document as :root, so they inherit these anyway. .wl-root still means
 * something in components.css, where it carries the reset and the page fill; it just no longer
 * needs to carry a second copy of the palette.
 */

:root {
  /* Signal is a light design and has no dark twin. This exists so theme.css can write
     `color-scheme: var(--wl-scheme, dark)` in its dark block and have the PANEL resolve it to
     light while the client portal, which does not load this file, falls back to dark and keeps
     both its schemes. color-scheme decides the native scrollbar, the caret and every unstyled
     form control, so leaving it dark under a white app is visible, not cosmetic. */
  --wl-scheme: light;

  /* type */
  --wl-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wl-display: var(--wl-sans);
  --wl-label: 'Poppins', var(--wl-sans);
  --wl-body: 14px;
  --wl-display-size: 44px; --wl-display-weight: 400;
  --wl-title-size: 30px;   --wl-title-weight: 500;

  /* ground, panels, surfaces: three greys getting lighter as you go inward */
  --wl-frame: #e7e9ed;        /* page ground behind the panels */
  --wl-rail-bg: #ffffff;      /* the sidebar panel */
  --wl-bg: #fafbfc;           /* the content panel */
  --wl-surface: #ffffff;      /* cards */
  --wl-surface-2: #f3f4f6;    /* wells inside cards, hover rows, tracks */
  --wl-border: #e6e8ec;
  --wl-border-strong: #d3d6dc;

  /* ink */
  --wl-text: #0b0c0e;
  --wl-text-2: #4b5563;
  --wl-text-3: #8b929c;

  /* accent (charts, links, focus). Buttons and the active nav row are black, not blue. */
  --wl-accent: #2563eb;
  --wl-accent-ink: #1d4ed8;
  --wl-accent-fg: #ffffff;
  --wl-accent-soft: #e8eefc;
  --wl-nav-active-bg: #0b0c0e;
  --wl-nav-active-fg: #ffffff;

  /* semantic */
  --wl-ok: #1a7f4b;     --wl-ok-soft: #e3f5ea;
  --wl-warn: #a35d00;   --wl-warn-soft: #fff1d6;
  --wl-danger: #c62828; --wl-danger-soft: #fde8e8;
  --wl-data-2: #ec4899;
  --wl-data-3: #14b8a6;
  --wl-data-4: #f59e0b;
  --wl-data-5: #8b5cf6;

  /* shape and rhythm */
  --wl-r-sm: 12px; --wl-r: 22px; --wl-r-lg: 28px;
  --wl-frame-gap: 14px;       /* space between the ground edge and the panels, and between them */
  --wl-panel-r: 26px;
  --wl-rail-w: 264px;
  --wl-rail-collapsed: 76px;
  --wl-topbar-h: 68px;
  --wl-row-h: 52px;
  --wl-pad: 24px;
  --wl-gap: 18px;
  --wl-shadow: 0 1px 2px rgba(11, 12, 14, .03), 0 8px 24px -12px rgba(11, 12, 14, .08);
  --wl-shadow-hover: 0 2px 4px rgba(11, 12, 14, .04), 0 14px 32px -14px rgba(11, 12, 14, .14);
  --wl-focus: 0 0 0 3px color-mix(in srgb, var(--wl-accent) 35%, transparent);

  /* chart fills: hatched, fading to the baseline */
  --wl-fill-a: repeating-linear-gradient(-45deg, var(--wl-accent) 0 2px, color-mix(in srgb, var(--wl-accent) 30%, #fff) 2px 6px);
  --wl-fill-2: repeating-linear-gradient(-45deg, var(--wl-data-2) 0 2px, color-mix(in srgb, var(--wl-data-2) 30%, #fff) 2px 6px);
}