/* Compunamics — design tokens (deep enterprise blue/slate; structure adapted from the "neon" system) */
:root {
  /* Surfaces */
  --bg:           #08090C;
  --bg-grad-1:    #0C0F15;
  --surface:      #0E1119;
  --surface-2:    #141925;
  --border:       #232A38;
  --border-soft:  #1A202C;

  /* Text */
  --fg:           #EEF1F6;
  --fg-muted:     #98A2B3;
  --fg-dim:       #6B7585;

  /* Brand — token names retained (legal pages reference them); re-valued to blue/slate.
     --lime = primary accent, --cyan = gradient endpoint, --magenta = ambient only. */
  --lime:         #6366F1;
  --lime-soft:    rgba(99, 102, 241, 0.16);
  --lime-glow:    rgba(79, 70, 229, 0.40);
  --cyan:         #2563EB;
  --cyan-soft:    rgba(37, 99, 235, 0.16);
  --cyan-glow:    rgba(37, 99, 235, 0.45);
  --magenta:      #3B82F6;

  /* Brand gradients + readable aliases */
  --grad-brand:   linear-gradient(120deg, #2563EB 0%, #4F46E5 60%, #6366F1 100%);
  --grad-brand-2: linear-gradient(135deg, #2563EB, #4F46E5);
  --accent:        #6366F1;
  --accent-bright: #818CF8;

  /* Glass + glow */
  --glow-indigo:  rgba(79, 70, 229, 0.18);
  --glow-blob:    rgba(37, 99, 235, 0.06);
  --glass:        rgba(14, 17, 25, 0.60);
  --glass-border: rgba(255, 255, 255, 0.08);

  /* Secondary highlight (gold) — "Most Requested" pill + one emphasized stat.
     Replaces Fangolabs' emerald "$0/free" accent; there is NO free/$0 concept here. */
  --gold:         #E0A23A;
  --gold-soft:    rgba(224, 162, 58, 0.14);
  --gold-border:  rgba(224, 162, 58, 0.40);

  /* Type */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale (clamp = fluid) */
  --t-display:    clamp(2.75rem, 6vw, 5.25rem);
  --t-h1:         clamp(2rem, 4.5vw, 3.5rem);
  --t-h2:         clamp(1.5rem, 2.4vw, 2rem);
  --t-h3:         1.25rem;
  --t-body:       1.0625rem;
  --t-small:      0.9375rem;
  --t-mono:       0.8125rem;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;

  /* Layout */
  --maxw-content: 1200px;
  --maxw-prose:   720px;
  --radius-sm: 6px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl:  18px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;

  /* Motion */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur:      400ms;
  --dur-slow: 800ms;

  /* Effects */
  --shadow-glow: 0 0 0 1px rgba(79, 70, 229, 0.30), 0 8px 32px rgba(79, 70, 229, 0.18);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 16px 40px rgba(0,0,0,0.45);
  --shadow-2xl:  0 24px 64px rgba(0,0,0,0.55);
  --shadow-pop:  0 0 0 2px #4F46E5, 0 20px 48px rgba(79, 70, 229, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur:      0ms;
    --dur-slow: 0ms;
  }
}