/* Zyper brand tokens: the one source for every Zyper app frame. Synced into each app by
   packages/brand/sync.mjs; apps map these onto their own variable names. */
:root {
  --zf-bg: #09090b;
  --zf-surface: rgba(255,255,255,.025);
  --zf-border: rgba(255,255,255,.08);
  --zf-border-hi: rgba(255,255,255,.14);
  --zf-text: #fff;
  --zf-dim: #a1a1aa;
  --zf-muted: #8a8a93;
  --zf-accent: #feca9a;
  --zf-success: #7dd3a0;
  --zf-danger: #ff5959;
  --zf-font: "Geist", ui-sans-serif, system-ui, sans-serif;
  --zf-mono: "Geist Mono", ui-monospace, monospace;
  --zf-header-h: 56px;
  /* logo lockup: the same size and place in every app (sidebar head or header) */
  --zf-logo-h: 21px;
  --zf-logo-x: 18px;
  --zf-brand-gap: 10px;
  --zf-side-w: 228px;
  --zf-side-mini: 64px;
  --zf-item-h: 34px;
  --zf-menu-bg: #111114;
  --zf-hover: rgba(255,255,255,.05);
  /* type scale: six roles, nothing under 11px (micro); line heights pair with each size */
  --zf-text-display: 28px;  --zf-leading-display: 34px;
  --zf-text-title: 16px;    --zf-leading-title: 22px;
  --zf-text-subtitle: 14px; --zf-leading-subtitle: 20px;
  --zf-text-body: 13px;     --zf-leading-body: 20px;
  --zf-text-caption: 12px;  --zf-leading-caption: 16px;
  --zf-text-micro: 11px;    --zf-leading-micro: 14px;
  /* control heights: buttons, inputs, selects, tabs and menu rows; compact for dense tables and toolbars */
  --zf-control-h: 34px;
  --zf-control-h-compact: 28px;
  /* fluid motion: fast for hover and fades, moderate for glides and dropdowns, slow (a small spring)
     for selection and menus opening; things close one tier faster than they open */
  --zf-dur-fast: .08s;
  --zf-dur-moderate: .16s;
  --zf-dur-slow: .24s;
  --zf-ease-fast: cubic-bezier(.2,.8,.2,1);
  --zf-ease-moderate: cubic-bezier(.22,1,.36,1);
  --zf-ease-spring: linear(0, .06 2.5%, .24 7%, .5 13%, .76 20%, .93 27%, 1.03 35%, 1.06 42%, 1.05 50%, 1.02 60%, 1 72%, .995 85%, 1);
}
