/* Vortex Design Tokens — v3 (modern, light-first) */
:root {
  /* Colors — Background */
  --bg-body:       #F4F6FA;
  --bg-card:       #FFFFFF;
  --bg-surface:    #F0F2F8;
  --bg-hover:      #E8ECF5;
  --bg-input:      #FFFFFF;
  --bg-console:    #0F1117;
  --bg-secondary:  #F7F8FC;
  --bg-inset:      #F0F2F7;

  /* Colors — Border */
  --border-default: #E2E6F0;
  --border-light:   #EDF0F7;
  --border-hover:   #CBD2E4;
  --border-strong:  #C1C9DE;

  /* Colors — Text */
  --text-primary:   #111827;
  --text-secondary: #4B5563;
  --text-muted:     #8993A4;
  --text-dim:       #C8CDD8;

  /* Colors — Accent (Indigo) */
  --accent-blue:       #4F46E5;
  --accent-blue-bg:    #4F46E5;
  --accent-blue-hover: #4338CA;
  --accent-blue-dim:   rgba(79,70,229,.06);
  --accent-blue-light: rgba(79,70,229,.10);
  --accent-blue-ring:  rgba(79,70,229,.18);

  /* Colors — Status */
  --color-pass:        #059669;
  --color-pass-bg:     rgba(5,150,105,.08);
  --color-pass-border: rgba(5,150,105,.22);
  --color-pass-grad:   linear-gradient(90deg, #047857, #10B981);

  --color-fail:        #DC2626;
  --color-fail-bg:     rgba(220,38,38,.07);
  --color-fail-border: rgba(220,38,38,.18);
  --color-fail-grad:   linear-gradient(90deg, #B91C1C, #EF4444);
  --color-fail-deep:   #FEF2F2;
  --color-fail-hover:  #FEE2E2;
  --color-fail-block:  #FEF2F2;

  --color-flaky:        #D97706;
  --color-flaky-bg:     rgba(217,119,6,.08);
  --color-flaky-border: rgba(217,119,6,.18);
  --color-flaky-grad:   linear-gradient(90deg, #B45309, #F59E0B);

  --color-skipped:        #6B7280;
  --color-skipped-bg:     rgba(107,114,128,.07);
  --color-skipped-border: rgba(107,114,128,.18);

  --color-running:        #0284C7;
  --color-running-bg:     rgba(2,132,199,.08);
  --color-running-border: rgba(2,132,199,.18);

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

  /* Typography — Scale */
  --text-2xs: 12px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-base:14px;
  --text-md:  15px;
  --text-lg:  16px;
  --text-xl:  18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 32px;
  --text-5xl: 40px;

  /* Spacing — 4px base */
  --sp-0: 0px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Border radius */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  10px;
  --radius-xl:  12px;
  --radius-2xl: 16px;
  --radius-pill: 9999px;

  /* Transitions */
  --transition-fast: 0.12s ease;
  --transition-base: 0.18s ease;
  --transition-slow: 0.3s ease;

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.09), 0 4px 8px rgba(0,0,0,.04);
  --shadow-accent: 0 2px 8px rgba(79,70,229,.22);

  /* Line-height tokens */
  --lh-tight: 1.25;
  --lh-base: 1.5;
  --lh-relaxed: 1.75;

  /* Transition tokens */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;

  /* Z-index scale */
  --z-header: 100;
  --z-overlay: 50;
  --z-toast: 10000;
}