:root{
  --cr-bg: #07070b;
  --cr-bg-card: rgba(255,255,255,0.03);
  --cr-bg-hover: rgba(255,255,255,0.05);

  --cr-bg-sidebar: rgba(0,0,0,0.55);
  --cr-bg-header: rgba(0,0,0,0.35);
  --cr-bg-surface: rgba(255,255,255,0.02);
  --cr-bg-surface-strong: rgba(255,255,255,0.04);

  --cr-bg-tertiary: var(--cr-bg-surface-strong);

  --cr-border: #413740;
  --cr-border2: rgb(177, 92, 169);
  --cr-border3: #877f86;
  --cr-border-soft: rgba(255,255,255,0.06);

  --cr-text: rgba(255,255,255,0.92);
  --cr-text-strong: rgba(255,255,255,0.95);
  --cr-text-muted: rgba(255,255,255,0.55);
  --cr-text-dim: rgba(255,255,255,0.48);
  --cr-text-faint: rgba(255,255,255,0.32);

  --cr-primary: #8b5cf6;
  --cr-primary-dark: #7c3aed;
  --cr-primary-2: #a78bfa;
  --cr-secondary: #ec4899;

  --cr-primary-hover: var(--cr-primary-dark);

  --cr-primary-light: var(--cr-primary-bg-soft);

  --cr-primary-dim: rgba(var(--cr-primary-rgb), 0.72);

  --cr-info-bg: rgba(59,130,246,0.12);

  --cr-primary-border: rgba(139,92,246,0.22);
  --cr-primary-border-strong: rgba(139,92,246,0.35);
  --cr-primary-border-medium: rgba(139,92,246,0.30);
  --cr-primary-border-focus: rgba(139,92,246,0.45);
  --cr-primary-bg: rgba(139,92,246,0.22);
  --cr-primary-bg-soft: rgba(139,92,246,0.12);
  --cr-primary-bg-xsoft: rgba(139,92,246,0.08);
  --cr-primary-bg-xxsoft: rgba(139,92,246,0.06);
  --cr-primary-bg-light: rgba(139,92,246,0.15);
  --cr-primary-bg-faint: rgba(139,92,246,0.05);
  --cr-primary-bg-medium: rgba(139,92,246,0.18);
  --cr-primary-bg-hover: rgba(139,92,246,0.30);
  --cr-secondary-bg-soft: rgba(236,72,153,0.10);

  --cr-brand-grad-1: rgba(139,92,246,0.35);
  --cr-brand-grad-2: rgba(236,72,153,0.22);
  --cr-brand-border: rgba(139,92,246,0.25);
  --cr-brand-border-light: rgba(139,92,246,0.20);

  --cr-success: #22c55e;
  --cr-success-text: rgba(34,197,94,0.9);
  --cr-success-border: rgba(34,197,94,0.25);
  --cr-success-bg: rgba(34,197,94,0.08);
  --cr-success-bg-soft: rgba(34,197,94,0.07);

  --cr-warning: #f59e0b;
  --cr-warning-text: rgba(245,158,11,0.95);
  --cr-warning-border: rgba(245,158,11,0.25);
  --cr-warning-bg: rgba(245,158,11,0.07);
  --cr-warning-bg-soft: rgba(245,158,11,0.06);

  --cr-error: #ef4444;
  --cr-error-text: rgba(239,68,68,0.95);
  --cr-error-border: rgba(239,68,68,0.25);
  --cr-error-bg: rgba(239,68,68,0.07);
  --cr-error-bg-soft: rgba(239,68,68,0.06);

  --cr-text-icon: rgba(255,255,255,0.25);
  --cr-text-cover: rgba(255,255,255,0.65);
  --cr-text-soft: rgba(255,255,255,0.75);
  --cr-text-white: white;

  --cr-overlay-dark: rgba(0,0,0,0.22);
  --cr-overlay-darker: rgba(0,0,0,0.25);
  --cr-overlay-inset: rgba(0,0,0,0.2);
  --cr-overlay-light: rgba(0,0,0,0.4);
  --cr-overlay-heavy: rgba(0,0,0,0.6);

  --cr-card-bg: rgba(26,26,26,0.7);
  --cr-card-bg-light: rgba(26,26,26,0.55);
  --cr-card-border: rgba(42,42,42,0.9);
  --cr-input-bg: rgba(15,15,15,0.6);
  --cr-bg-muted: rgba(111, 110, 110, 0.6);

  --cr-error-light: #fca5a5;
  --cr-error-bg-light: rgba(239,68,68,0.1);

  --cr-brand-grad-primary: linear-gradient(135deg, var(--cr-primary), var(--cr-primary-dark));
  --cr-brand-grad-radial-1: rgba(139,92,246,0.18);
  --cr-brand-grad-radial-2: rgba(236,72,153,0.12);

  --cr-radius: 14px;
  --cr-radius-sm: 10px;
  --cr-radius-2xs: 8px;
  --cr-radius-xs: 6px;
  --cr-radius-md: 12px;
  --cr-radius-lg: 18px;
  --cr-radius-xl: 22px;

  --cr-transition-fast: 0.15s ease;
  --cr-transition-med: 0.2s ease;
  --cr-transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  --cr-font-xs: 11px;
  --cr-font-sm: 12px;
  --cr-font-base: 13px;
  --cr-font-md: 14px;
  --cr-font-lg: 16px;
  --cr-font-xl: 20px;
  --cr-font-2xl: 24px;

  --cr-space-xs: 4px;
  --cr-space-sm: 8px;
  --cr-space-md: 12px;
  --cr-space-lg: 16px;
  --cr-space-xl: 24px;
  --cr-space-2xl: 32px;
  --cr-space-3xl: 48px;

  /* Cross-file variable aliases (keeps component styling consistent) */

  --cr-surface-1: var(--cr-modal-bg);
  --cr-surface-2: var(--cr-bg-surface-strong);
  --cr-border-1: var(--cr-border);
  --cr-text-1: var(--cr-text);
  --cr-text-2: var(--cr-text-muted);
  --cr-text-3: var(--cr-text-faint);
  --cr-brand-primary: var(--cr-primary);
  --cr-brand-secondary: var(--cr-secondary);

  /* Legacy page colors - for pages.css compatibility */
  --cr-shadow-light: rgba(0,0,0,0.1);
  --cr-overlay-modal: rgba(0,0,0,0.7);
  --cr-overlay-hero: rgba(0,0,0,0.8);
  --cr-modal-bg: #1a1a24;

  --cr-success-bg-light: #dcfce7;
  --cr-success-text-dark: #166534;
  --cr-warning-bg-light: #fef3c7;
  --cr-warning-text-dark: #92400e;
  --cr-error-bg-pink: #fee2e2;
  --cr-error-text-dark: #991b1b;
  --cr-error-bg-fee: #fee;
  --cr-error-text-c00: #c00;

  --cr-info: #3b82f6;
  --cr-lime: #84cc16;

  --cr-grad-cover: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --cr-grad-success: linear-gradient(90deg, var(--cr-success), var(--cr-lime));
  --cr-success-bg-diff: rgba(16,185,129,0.15);
  --cr-error-bg-diff: rgba(239,68,68,0.15);

  --cr-bar-bg: #e5e7eb;
  --cr-draft-bg: #fffbeb;

  --cr-gray-light: #f3f4f6;
  --cr-gray-muted: #6b7280;
  --cr-amber: #d97706;
  --cr-indigo-light: #eef2ff;
  --cr-indigo-dark: #4338ca;
  --cr-purple-indigo: #6366f1;
  --cr-tab-bg: #15151d;
  --cr-error-bg-fef2: #fef2f2;

  --cr-info-bg-light: #dbeafe;
  --cr-error-bg-fee2: #fee2e2;
  --cr-primary-2-light: #a78bfa;
  --cr-primary-2-lighter: #c4b5fd;

  --cr-text-white-80: rgba(255,255,255,0.8);
  --cr-text-white-70: rgba(255,255,255,0.7);
  --cr-shadow-card: rgba(0,0,0,0.12);
  --cr-shadow-panel: rgba(0,0,0,0.15);

  /* Tooltip and enhanced UI */
  --cr-bg-tooltip: #1f2937;
  --cr-primary-rgb: 139, 92, 246;
}