/* JuJu Panel design tokens — SINGLE SOURCE OF TRUTH (docs/design-system.md).
   Brand palette is fixed; do not add colors here without updating the doc. */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap');

:root {
  /* brand */
  --j-purple: #8224E3;
  --j-purple-deep: #6B21A8;
  --j-purple-hi: #9333EA;
  --j-grad: linear-gradient(135deg, #9333EA 0%, #8224E3 55%, #6B21A8 100%);
  --j-pink: #FF3975;          /* ONE most-important CTA per screen, nothing else */
  --j-yellow: #FACC15;

  /* text */
  --j-ink: #111827;
  --j-sub: #4B5563;
  --j-mut: #6B7280;
  --j-faint: #9CA3AF;

  /* surfaces */
  --j-bg: #F3F4F6;
  --j-card: #FFFFFF;
  --j-tint: #EBE7F7;
  --j-border: #E5E7EB;
  --j-border-tint: #DED6F3;

  /* status */
  --j-ok: #16A34A;   --j-ok-bg: #DCFCE7;
  --j-warn: #D97706; --j-warn-bg: #FEF3C7;
  --j-crit: #DC2626; --j-crit-bg: #FEE2E2;
  --j-info-bg: #EBE7F7;

  /* type */
  --j-font: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --j-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --j-fs-h1: 18px;
  --j-fs-h2: 14px;
  --j-fs-body: 13px;
  --j-fs-sm: 12px;
  --j-fs-label: 11px;
  --j-fs-num: 20px;
  --j-fs-micro: 10px;

  /* spacing (4px base) */
  --j-s1: 4px; --j-s2: 8px; --j-s3: 12px; --j-s4: 16px; --j-s5: 20px; --j-s6: 24px;

  /* radius */
  --j-r-s: 4px; --j-r: 6px; --j-r-l: 8px;

  /* shadows */
  --j-shadow: 0 1px 2px rgba(17, 24, 39, .05);
  --j-shadow-pop: 0 8px 24px rgba(17, 24, 39, .14);

  /* focus */
  --j-focus-ring: 0 0 0 3px rgba(130, 36, 227, .12);
}