/* ============================================
   WORKFACILIT v2 — Design System Tokens
   Dark-first, premium product aesthetic
   ============================================ */

:root {
  /* ── Brand ── */
  --wf-primary: #6366f1;
  --wf-primary-light: #818cf8;
  --wf-primary-lighter: #a5b4fc;
  --wf-primary-dark: #4f46e5;
  --wf-primary-50: #eef2ff;
  --wf-primary-100: #e0e7ff;

  --wf-cyan: #06b6d4;
  --wf-cyan-light: #22d3ee;
  --wf-emerald: #10b981;
  --wf-emerald-light: #34d399;
  --wf-rose: #f43f5e;
  --wf-amber: #f59e0b;
  --wf-violet: #8b5cf6;

  /* ── Surfaces (dark) ── */
  --wf-bg: #09090b;
  --wf-bg-elevated: #111113;
  --wf-bg-card: #18181b;
  --wf-bg-card-hover: #1f1f23;
  --wf-bg-glass: rgba(255,255,255,0.03);
  --wf-border: rgba(255,255,255,0.06);
  --wf-border-hover: rgba(255,255,255,0.12);

  /* ── Text ── */
  --wf-text-1: #fafafa;
  --wf-text-2: rgba(255,255,255,0.6);
  --wf-text-3: rgba(255,255,255,0.35);

  /* ── Gradients ── */
  --wf-grad-text: linear-gradient(135deg, #818cf8, #22d3ee, #34d399);
  --wf-grad-hero: linear-gradient(135deg, #6366f1 0%, #06b6d4 50%, #10b981 100%);
  --wf-grad-glow: radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(99,102,241,0.07), transparent 40%);

  /* ── Type ── */
  --wf-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --wf-display: 'Plus Jakarta Sans', var(--wf-sans);

  /* ── Layout ── */
  --wf-max: 1280px;
  --wf-narrow: 860px;
  --wf-section: 8rem;

  /* ── Radius ── */
  --wf-r-sm: 6px;
  --wf-r-md: 12px;
  --wf-r-lg: 16px;
  --wf-r-xl: 24px;
  --wf-r-full: 9999px;

  /* ── Motion ── */
  --wf-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wf-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}