:root {
    /* ============================================
       RANKFLOW UNIVERSAL THEME VARIABLES
       Single source of truth for all styling
       ============================================ */

    /* Core Backgrounds */
    --rf-bg: #05070b;
    --rf-bg-dark: #000000;
    --rf-bg-elevated: #0b0f17;
    --rf-bg-card: rgba(10, 14, 22, 0.55);
    --rf-glass-bg: rgba(255, 255, 255, 0.03);
    --rf-glass-bg-strong: rgba(255, 255, 255, 0.06);
    --rf-glass-bg2: var(--rf-glass-bg-strong);

    /* Borders */
    --rf-border-soft: rgba(255, 255, 255, 0.08);
    --rf-border-strong: rgba(255, 255, 255, 0.15);
    --rf-border-neon: rgba(34, 242, 194, 0.3);
    --rf-border: rgba(34, 242, 194, 0.18);
    --rf-border-light: var(--rf-border);
    --rf-border-glass: var(--rf-border-soft);
    --rf-border-active: var(--rf-border-neon);

    /* Accent Colors - Neon Theme */
    --rf-accent-cyan: #22f2c2;
    --rf-accent-purple: #7b5cff;
    --rf-accent-pink: #ff2fbf;
    --rf-accent-blue: #3b82f6;

    /* Primary/Secondary (for legacy compatibility) */
    --rf-primary: #7b5cff;
    --rf-secondary: #22f2c2;

    /* Gradients */
    --rf-gradient: linear-gradient(135deg, #22f2c2 0%, #7b5cff 100%);
    --rf-gradient-hover: linear-gradient(135deg, #2affd2 0%, #886aff 100%);
    --gradient-primary: var(--rf-gradient);
    --gradient-primary-hover: var(--rf-gradient-hover);

    /* Status Colors */
    --rf-success: #22c55e;
    --rf-success-light: rgba(34, 197, 94, 0.1);
    --rf-warning: #f59e0b;
    --rf-warning-light: rgba(245, 158, 11, 0.1);
    --rf-danger: #ef4444;
    --rf-danger-light: rgba(239, 68, 68, 0.1);
    --rf-error: var(--rf-danger);
    --rf-info: #3b82f6;
    --rf-info-light: rgba(59, 130, 246, 0.1);

    /* Skeleton / Loading */
    --rf-skeleton-base: rgba(255, 255, 255, 0.08);
    --rf-skeleton-highlight: rgba(255, 255, 255, 0.14);

    /* Typography */
    --rf-text-main: #f9fafb;
    --rf-text-dark: #e6faff;
    --rf-text-muted: #9ca3af;
    --rf-text-dimmed: #64748b;

    /* Border Radius */
    --rf-radius-2: 2px;
    --rf-radius-xxs: 3px;
    --rf-radius-xs: 4px;
    --rf-radius-sm: 6px;
    --rf-radius-md: 8px;
    --rf-radius-10: 10px;
    --rf-radius-12: 12px;
    --rf-radius-14: 14px;
    --rf-radius-lg: 16px;
    --rf-radius-18: 18px;
    --rf-radius-xl: 20px;
    --rf-radius-2xl: 24px;
    --rf-radius-pill: 999px;

    /* Spacing */
    --rf-spacing-2: 2px;
    --rf-spacing-6: 6px;
    --rf-spacing-xs: 4px;
    --rf-spacing-sm: 8px;
    --rf-spacing-10: 10px;
    --rf-spacing-12: 12px;
    --rf-spacing-14: 14px;
    --rf-spacing-md: 16px;
    --rf-spacing-20: 20px;
    --rf-spacing-lg: 24px;
    --rf-spacing-28: 28px;
    --rf-spacing-xl: 32px;
    --rf-spacing-36: 36px;
    --rf-spacing-40: 40px;
    --rf-spacing-48: 48px;
    --rf-spacing-60: 60px;

    /* Layout */
    --rf-header-height: 64px;
    --rf-sidebar-width: 260px;

    /* Shadows */
    --rf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --rf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --rf-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.12);
    --rf-shadow-soft: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    --rf-shadow-glow-cyan: 0 0 20px rgba(34, 242, 194, 0.25);
    --rf-shadow-glow-purple: 0 0 20px rgba(123, 92, 255, 0.25);

    /* Blur */
    --rf-blur-glass: 14px;

    /* Transitions */
    --rf-transition-fast: 0.2s;
    --rf-transition-normal: 0.3s;

    /* Legacy Mappings (backward compatibility) */
    --color-purple: var(--rf-accent-purple);
    --color-cyan: var(--rf-accent-cyan);
    --color-emerald: var(--rf-success);
    --color-emerald-light: #34d399;
    --shadow-sm: var(--rf-shadow-sm);
    --shadow-md: var(--rf-shadow-md);
    --shadow-lg: var(--rf-shadow-lg);
    --shadow-layered: var(--rf-shadow-md);
    --shadow-glow: var(--rf-shadow-glow-cyan);
    --shadow-glow-purple: var(--rf-shadow-glow-purple);

    /* Service-Specific Colors (for integrations) */
    --rf-color-gsc: #4285f4;
    --rf-color-ga4: #fbbc04;
    --rf-color-gmb: #34a853;
    --rf-color-wordpress: #21759b;
    --rf-color-gemini: #8b5cf6;
}