/* ========================================
   Design Tokens - CSS Custom Properties
   Single source of truth for UI values
   ======================================== */
:root {
  /* ---------- Brand / primary ---------- */
  --ck-color-primary: #6253e8;
  --ck-color-primary-2: #8b5cf6;
  --ck-color-primary-hover: #5144d3;
  --ck-color-primary-hover-2: #7c3aed;
  --ck-color-primary-soft: #c4b5fd;
  --ck-color-primary-bg: rgba(98, 83, 232, 0.08);
  --ck-color-primary-bg-strong: rgba(98, 83, 232, 0.12);

  --ck-gradient-primary: linear-gradient(135deg, #6253e8 0%, #8b5cf6 100%);
  --ck-gradient-primary-hover: linear-gradient(135deg, #5144d3 0%, #7c3aed 100%);
  --ck-gradient-primary-soft: linear-gradient(135deg, rgba(98, 83, 232, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);

  /* ---------- Status ---------- */
  --ck-color-success: #10b981;
  --ck-color-success-2: #059669;
  --ck-gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);

  --ck-color-danger: #ef4444;
  --ck-color-warning: #f59e0b;
  --ck-color-info: #3b82f6;

  /* ---------- Text ---------- */
  --ck-color-text-strong: #111827;
  --ck-color-text: #1f2937;
  --ck-color-text-muted: #6b7280;
  --ck-color-text-subtle: #9ca3af;
  --ck-color-text-label: #374151;
  --ck-color-text-body: #4b5563;

  /* ---------- Surface ---------- */
  --ck-color-bg-page: #f8f9fa;
  --ck-color-bg-card: #ffffff;
  --ck-color-bg-subtle: #f9fafb;
  --ck-color-bg-muted: #f3f4f6;

  --ck-color-border: #e5e7eb;
  --ck-color-border-soft: #f3f4f6;

  /* ---------- Radius ---------- */
  --ck-radius-sm: 6px;
  --ck-radius: 8px;
  --ck-radius-md: 12px;
  --ck-radius-lg: 16px;
  --ck-radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --ck-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
  --ck-shadow-sm: 0 2px 8px rgba(98, 83, 232, 0.2);
  --ck-shadow-md: 0 8px 24px rgba(98, 83, 232, 0.1);
  --ck-shadow-lg: 0 12px 40px rgba(98, 83, 232, 0.15);
  --ck-shadow-brand: 0 4px 12px rgba(98, 83, 232, 0.25);

  /* ---------- Motion ---------- */
  --ck-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ck-transition-fast: all 0.2s var(--ck-ease);
  --ck-transition: all 0.3s var(--ck-ease);

  /* ---------- Typography ---------- */
  --ck-heading-weight: 700;
  --ck-heading-weight-bold: 800;
  --ck-heading-tracking: -0.02em;
  --ck-heading-tracking-sm: -0.01em;

  /* ---------- Spacing scale ---------- */
  --ck-space-1: 0.25rem;
  --ck-space-2: 0.5rem;
  --ck-space-3: 0.75rem;
  --ck-space-4: 1rem;
  --ck-space-5: 1.25rem;
  --ck-space-6: 1.5rem;
  --ck-space-8: 2rem;

  /* ---------- Layout ---------- */
  --ck-container-max: 1140px;
}