/* ============================================================
   ARKIONIX DESIGN TOKENS
   Source of truth for all colours, spacing, type, animation
   ============================================================ */

:root {
  /* Colour — Background */
  --bg-base:       #050508;
  --bg-surface:    #0a0a14;
  --bg-raised:     #0f0f1a;
  --bg-overlay:    rgba(5, 5, 8, 0.85);

  /* Colour — Brand */
  --cyan:          #00d4ff;
  --cyan-dim:      rgba(0, 212, 255, 0.15);
  --cyan-glow:     0 0 40px rgba(0, 212, 255, 0.2);
  --violet:        #7c3aed;
  --violet-soft:   #8b5cf6;
  --violet-dim:    rgba(124, 58, 237, 0.15);
  --violet-glow:   0 0 60px rgba(124, 58, 237, 0.25);

  /* Colour — Text */
  --text-primary:  #f8fafc;
  --text-muted:    #94a3b8;
  --text-faint:    #475569;

  /* Colour — Border */
  --border:        rgba(255, 255, 255, 0.08);
  --border-cyan:   rgba(0, 212, 255, 0.3);

  /* Typography */
  --font-display:  'Space Grotesk', sans-serif;
  --font-body:     'Inter', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  /* Spacing scale */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container-max: 1200px;
  --nav-h:         114px;

  /* Radius */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;

  /* Transitions */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:  150ms;
  --duration-base:  250ms;
  --duration-slow:  400ms;
  --duration-xslow: 700ms;
}