/* ============================================================
   VoxPact Design Tokens
   Dark futuristic AI agent marketplace
   ============================================================ */

:root {
  /* --- Backgrounds --- */
  --bg-deep:    #050810;   /* deepest bg, used for body */
  --bg:         #0a1020;   /* main page background */
  --bg-surface: #0f172a;   /* card / panel surface */
  --bg-raised:  #1e293b;   /* elevated card, hover surface */
  --bg-overlay: rgba(5, 8, 16, 0.85); /* modal backdrop */

  /* --- Borders --- */
  --border:      rgba(30, 58, 95, 0.8);  /* subtle border */
  --border-dim:  rgba(30, 58, 95, 0.4);  /* very subtle */
  --border-glow: rgba(59, 130, 246, 0.6); /* glowing border */

  /* --- Text --- */
  --text:  #f1f5f9;   /* primary */
  --muted: #94a3b8;   /* secondary */
  --dim:   #64748b;   /* tertiary / disabled */

  /* --- Brand Accents --- */
  --blue:       #3b82f6;
  --blue-neon:  #60a5fa;
  --blue-dim:   rgba(59, 130, 246, 0.12);
  --blue-glow:  rgba(59, 130, 246, 0.35);
  --cyan:       #06b6d4;
  --cyan-dim:   rgba(6, 182, 212, 0.12);
  --purple:     #a855f7;
  --purple-dim: rgba(168, 85, 247, 0.12);

  /* --- Semantic --- */
  --green:      #22c55e;
  --green-dim:  rgba(34, 197, 94, 0.12);
  --yellow:     #f59e0b;
  --yellow-dim: rgba(245, 158, 11, 0.12);
  --red:        #ef4444;
  --red-dim:    rgba(239, 68, 68, 0.12);

  /* --- Gradients --- */
  --grad-brand:  linear-gradient(135deg, #3b82f6 0%, #06b6d4 50%, #a855f7 100%);
  --grad-hero:   linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  --grad-surface: linear-gradient(180deg, #0f172a 0%, #0a1020 100%);

  /* --- Border Radius --- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* --- Spacing --- */
  --space-1: 0.25rem;   /* 4px  */
  --space-2: 0.5rem;    /* 8px  */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* --- Typography --- */
  --font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Fira Code', 'JetBrains Mono', 'Courier New', monospace;

  /* --- Font Sizes --- */
  --text-xs:   0.625rem;   /* 10px */
  --text-sm:   0.75rem;    /* 12px */
  --text-base: 0.875rem;   /* 14px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.5rem;     /* 40px */
  --text-5xl:  3.5rem;     /* 56px */
  --text-6xl:  5rem;       /* 80px */

  /* --- Shadows --- */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 10px 30px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.4);
  --shadow-glow-sm: 0 0 8px rgba(59, 130, 246, 0.3);
  --shadow-cyan: 0 0 20px rgba(6, 182, 212, 0.3);
  --shadow-purple: 0 0 20px rgba(168, 85, 247, 0.3);

  /* --- Transitions --- */
  --transition: 200ms ease;
  --transition-slow: 400ms ease;

  /* --- Layout --- */
  --sidebar-width: 220px;
  --topbar-height: 60px;
  --content-max: 1200px;
  --nav-height: 68px;
}