/* ─────────────────────────────────────────────────────────────────────────
   Wiserframe design tokens — shared with the @wiserframe/tokens package.
   Source of truth: github.com/<org>/wiserframe-ui/packages/tokens/src/tokens.css
   Synced manually. Last sync: 2026-05-14.

   To update: edit /packages/tokens/src/tokens.css in the wiserframe-ui repo,
   then copy the file contents here. Do NOT diverge.

   Two namespaces live here:
   1. --wf-*   Canonical token names, matching the React tokens package.
              Use these in any NEW CSS.
   2. --blue, --slate-700, …   Legacy aliases mapped via var() to the --wf-*
              tokens. Used throughout the existing index.html. Do not remove
              while the inline CSS still references them.
   ─────────────────────────────────────────────────────────────────────── */

:root {
  /* ───── Brand ───── */
  --wf-blue:        #0083FF;   /* decorative / large surfaces · 3.94:1 vs white (graphics only) */
  --wf-blue-text:   #0073E0;   /* contrast-safe small text on white · 4.5:1 */
  --wf-blue-action: #0066CC;   /* white text on this surface · 5.18:1 ✓ AA */
  --wf-blue-soft:   #E5F0FB;   /* tinted backgrounds / pills */

  /* ───── Neutrals ───── */
  --wf-ink:         #000000;
  --wf-slate-700:   #6B7280;   /* secondary text · 4.83:1 ✓ AA */
  --wf-slate-500:   #9CA3AF;   /* decorative only — fails AA for text */
  --wf-slate-300:   #E5E7EB;
  --wf-border:      #E5E7EB;

  /* ───── Surfaces ───── */
  --wf-bg:          #FFFFFF;
  --wf-grid:        #F2F7FD;   /* faint dot-grid background */
  --wf-rail:        #E2EAF4;   /* 1px content-rail vertical guidelines */

  /* ───── Typography ───── */
  --wf-font-sans:   'Sora', system-ui, -apple-system, sans-serif;

  --wf-fs-9:   9px;
  --wf-fs-10: 10px;
  --wf-fs-11: 11px;
  --wf-fs-12: 12px;
  --wf-fs-13: 13px;
  --wf-fs-14: 14px;
  --wf-fs-17: 17px;
  --wf-fs-18: 18px;
  --wf-fs-24: 24px;
  --wf-fs-32: 32px;
  --wf-fs-48: 48px;
  --wf-fs-64: 64px;

  /* ───── Spacing ───── */
  --wf-space-1:   4px;
  --wf-space-2:   8px;
  --wf-space-3:  12px;
  --wf-space-4:  16px;
  --wf-space-5:  20px;
  --wf-space-6:  24px;
  --wf-space-8:  32px;
  --wf-space-10: 40px;
  --wf-space-12: 48px;
  --wf-space-16: 64px;
  --wf-space-20: 80px;

  /* ───── Radius ───── */
  --wf-radius-0:   0;
  --wf-radius-sm:  2px;
  --wf-radius-md: 12px;
  --wf-radius-lg: 14px;
  --wf-radius-pill: 999px;

  /* ───── Layout ───── */
  --wf-frame-max: 1280px;
  --wf-gutter:     24px;

  /* ───── Motion ───── */
  --wf-ease:      cubic-bezier(0.2, 0.6, 0.2, 1);
  --wf-dur-fast:  150ms;
  --wf-dur-base:  250ms;

  /* ───── Legacy aliases (marketing-site CSS still references these) ───── */
  --blue:         var(--wf-blue);
  --blue-text:    var(--wf-blue-text);
  --blue-action:  var(--wf-blue-action);
  --blue-soft:    var(--wf-blue-soft);
  --ink:          var(--wf-ink);
  --slate-700:    var(--wf-slate-700);
  --slate-500:    var(--wf-slate-500);
  --slate-300:    var(--wf-slate-300);
  --border:       var(--wf-border);
  --rail:         var(--wf-rail);
}
</content>
</invoke>