/* KineticPep — design tokens (CSS custom properties)
   Single source of truth. Mirrored in design-tokens.json. */

:root {
  /* ===== COLOR ===== */
  --bg-primary:        #F7F8FA;
  --bg-elevated:       #FFFFFF;
  --ink-primary:       #0B1F3A;
  --ink-secondary:     #4A5878;
  --ink-muted:         #8A95AB;
  --accent-cyan:       #00D4FF;
  --accent-cyan-deep:  #0099CC;
  --status-approved:   #00C896;
  --status-research:   #FF8A3D;
  --border-subtle:     #E5E9F0;
  --border-strong:     #C9D2E0;
  --research-bg:       #FFF4ED;
  --approved-bg:       #E6FBF4;

  /* ===== RADII ===== */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 999px;

  /* ===== SHADOW ===== */
  --shadow-sm:   0 1px 2px rgba(11, 31, 58, 0.04);
  --shadow-md:   0 4px 16px rgba(11, 31, 58, 0.06);
  --shadow-lg:   0 16px 48px rgba(11, 31, 58, 0.08);
  --shadow-cyan: 0 8px 32px rgba(0, 212, 255, 0.18);

  /* ===== TYPOGRAPHY ===== */
  --font-heading: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* ===== SPACING ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ===== LAYOUT ===== */
  --wrap-max: 1280px;
  --wrap-pad: 32px;
  --header-height: 72px;

  /* ===== DENSITY (tweakable) ===== */
  --density: 1;
  --section-pad: calc(96px * var(--density));
}