/**
 * ZeroSpread — Light Tool surface tokens.
 * True white financial-tool canvas — no gray structural surfaces.
 * Reference: qa-output/radar-true-white-document-workspace/TRUE_WHITE_ARCHITECTURE.md
 */

:root {
  /* Canvas — pure white */
  --zs-tool-canvas: #ffffff;
  --zs-tool-canvas-subtle: #ffffff;

  /* Surfaces — all white; hover only for interaction */
  --zs-tool-surface-primary: #ffffff;
  --zs-tool-surface-secondary: #ffffff;
  --zs-tool-surface-hover: #f8f9fa;
  /* Legacy aliases */
  --zs-tool-surface-1: var(--zs-tool-surface-primary);
  --zs-tool-surface-2: var(--zs-tool-surface-secondary);

  /* Typography */
  --zs-tool-text-primary: #131722;
  --zs-tool-text-secondary: #434651;
  --zs-tool-text-muted: #787b86;
  --zs-tool-text-disabled: #b2b5be;

  /* Borders & separators — alias canonical light hairline */
  --zs-tool-border: var(--zs-light-border, #e5e7eb);
  --zs-tool-border-soft: var(--zs-light-border-soft, rgba(15, 23, 42, 0.08));
  --zs-tool-separator: var(--zs-light-border, #e5e7eb);
  --zs-tool-border-strong: var(--zs-light-border, #e5e7eb);
  --zs-tool-highlight: #ffffff;

  /* Radius — functional tool family (unchanged scale) */
  --zs-tool-radius-sm: 6px;
  --zs-tool-radius-md: 8px;
  --zs-tool-radius-lg: 8px;
  --zs-tool-radius-xl: 8px;

  /* Shadows — overlays only; normal content uses none */
  --zs-tool-shadow-embedded: none;
  --zs-tool-shadow-workspace: none;
  --zs-tool-shadow-focus: 0 8px 24px rgba(19, 23, 34, 0.12);

  /* Semantic (data only) */
  --zs-tool-positive: #089981;
  --zs-tool-negative: #f23645;
  --zs-tool-warning: #ff9800;
  --zs-tool-info: #2962ff;

  /* Spacing scale */
  --zs-tool-space-1: 4px;
  --zs-tool-space-2: 8px;
  --zs-tool-space-3: 12px;
  --zs-tool-space-4: 16px;
  --zs-tool-space-5: 20px;
  --zs-tool-space-6: 24px;
  --zs-tool-space-8: 32px;

  /* Motion */
  --zs-tool-transition: 150ms ease;
}