/* ============================================================
   AI VALUE WORX — DESIGN SYSTEM TOKENS
   aivalueworx.com · v1.0 · 2026-04-19
   ============================================================ */

:root {
  /* --- Backgrounds --- */
  --bg-base:       #080D1A;   /* Page base — deep navy */
  --bg-surface:    #0F1828;   /* Cards, section backgrounds */
  --bg-raised:     #182236;   /* Elevated cards, modals */
  --bg-overlay:    #1E2B45;   /* Hover highlights, tooltips */

  /* --- Borders --- */
  --border-subtle:  #1A2840;
  --border-default: #243350;
  --border-strong:  #2D4160;

  /* --- Brand accent — Sky blue: intelligence signal --- */
  --accent:         #0EA5E9;
  --accent-light:   #38BDF8;
  --accent-dim:     #075985;
  --accent-glow:    rgba(14, 165, 233, 0.12);

  /* --- Evidence type colours --- */
  --hard-color:       #10B981;   /* Emerald: organisation-attributed */
  --hard-bg:          rgba(16, 185, 129, 0.10);
  --analytical-color: #A78BFA;   /* Violet: analytical/research */
  --analytical-bg:    rgba(167, 139, 250, 0.10);

  /* --- Text --- */
  --text-primary:   #EDF2F7;
  --text-secondary: #8BA4C0;
  --text-muted:     #4A6480;
  --text-link:      #38BDF8;

  /* --- Actions --- */
  --cta-bg:       #0EA5E9;
  --cta-bg-hover: #0284C7;
  --cta-text:     #080D1A;

  /* --- Typography --- */
  --font-sans: 'Inter', 'Helvetica Neue', Arial, system-ui, -apple-system, sans-serif;

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  /* --- Spacing (8px base) --- */
  --space-1:   0.5rem;
  --space-2:   1rem;
  --space-3:   1.5rem;
  --space-4:   2rem;
  --space-6:   3rem;
  --space-8:   4rem;
  --space-12:  6rem;
  --space-16:  8rem;
  --space-20:  10rem;

  /* --- Radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.45);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.55);
  --shadow-lg:     0 8px 40px rgba(0,0,0,0.65);
  --shadow-accent: 0 0 0 2px var(--accent-dim);

  /* --- Transitions --- */
  --transition-fast:   120ms ease;
  --transition-normal: 220ms ease;

  /* --- Layout --- */
  --max-width:     1200px;
  --content-width: 720px;
  --nav-height:    112px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}