/*
 * WireFlow — Design Token Foundation
 * Single source of truth for colors, type scale, spacing, and radii.
 *
 * Naming convention:
 *   --wf-*  = canonical token (use in new code)
 *   --ink, --txt, --panel, --line etc. = legacy page-level aliases
 *     kept for backward compat; converge onto --wf-* over time.
 *
 * Corner-radius intent (intentional, not drift):
 *   --wf-r-sharp  (4px)  = marketing / blueprint identity (landing, login cards)
 *   --wf-r-sm     (8px)  = compact UI chips, badges, small inputs
 *   --wf-r-md     (10px) = standard buttons, panels, modal shells
 *   --wf-r-lg     (14px) = cards, large overlays, sidebars
 *   --wf-r-xl     (20px) = pill badges
 */

/* ── Dark mode (default) ────────────────────────────────────────────────── */
:root {
  /* Surface */
  --wf-bg:        #0a0e16;
  --wf-surface:   #0d121c;
  --wf-surface-2: #111826;
  --wf-surface-3: #1a202e;

  /* Border */
  --wf-border:       #1c2636;
  --wf-border-hi:    #2c3c52;

  /* Text */
  --wf-text:      #eef2f7;
  --wf-text-dim:  #aeb9c9;
  --wf-text-muted:#5f6c80;

  /* Accent / interactive */
  --wf-accent:    #5b8def;
  --wf-accent-dk: #2563eb;

  /* Semantic */
  --wf-good:      #22c55e;
  --wf-warn:      #f59e0b;
  --wf-danger:    #f87171;

  /* Glow (decorative) */
  --wf-glow: rgba(40, 80, 150, 0.26);

  /* ── Legacy aliases (dashboard / landing namespace) ── */
  --bg:          var(--wf-bg);
  --panel:       var(--wf-surface);
  --panel2:      var(--wf-surface-2);
  --line:        var(--wf-border);
  --line-bright: var(--wf-border-hi);
  --ink:         var(--wf-text);
  --ink-dim:     var(--wf-text-dim);
  --muted:       var(--wf-text-muted);
  --accent:      var(--wf-accent);
  --danger:      var(--wf-danger);
  --glow:        var(--wf-glow);

  /* ── Legacy aliases (builder namespace) ── */
  --txt:    var(--wf-text);
  --border: var(--wf-border);

  /* ── Radius scale ── */
  --wf-r-sharp: 4px;
  --wf-r-sm:    8px;
  --wf-r-md:    10px;
  --wf-r-lg:    14px;
  --wf-r-xl:    20px;

  /* ── Type scale ── */
  --wf-fs-2xs: 9px;
  --wf-fs-xs:  11px;
  --wf-fs-sm:  12px;
  --wf-fs-md:  13.5px;
  --wf-fs-lg:  15px;
  --wf-fs-xl:  19px;
  --wf-fs-2xl: 24px;
  --wf-fs-3xl: 38px;

  /* ── Spacing scale (4px base) ── */
  --wf-sp-1: 4px;
  --wf-sp-2: 8px;
  --wf-sp-3: 12px;
  --wf-sp-4: 16px;
  --wf-sp-5: 20px;
  --wf-sp-6: 24px;
  --wf-sp-8: 32px;
  --wf-sp-10: 40px;
  --wf-sp-12: 48px;

  /* ── Font stacks ── */
  --wf-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
  --wf-font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* ── Transition presets ── */
  --wf-tr-fast:   80ms ease;
  --wf-tr-base:   150ms ease;
  --wf-tr-slow:   300ms ease;
}

/* ── Light mode ─────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --wf-bg:        #eef1f5;
  --wf-surface:   #ffffff;
  --wf-surface-2: #f1f4f9;
  --wf-surface-3: #e8ecf2;

  --wf-border:    #cdd6e2;
  --wf-border-hi: #aab8cb;

  --wf-text:      #0c121d;
  --wf-text-dim:  #3a4659;
  --wf-text-muted:#7c8aa0;

  --wf-accent:    #2563eb;
  --wf-accent-dk: #1d4ed8;

  --wf-glow: rgba(120, 160, 230, 0.20);
}