/**
 * ============================================
 * PROFESSIONAL ONBOARDING SYSTEM - CSS
 * ============================================
 * Unified with Afelta Master Theme
 * Uses --primary from master-theme.css
 * ============================================
 */

/* ===================
   CSS VARIABLES
   =================== */
:root {
    /* Onboarding inherits from master-theme --primary */
    --onboarding-primary: var(--primary, #e85d2f);
    --onboarding-primary-light: var(--primary-light, #f07845);
    --onboarding-primary-dark: var(--primary-dark, #c94820);

    /* Secondary */
    --onboarding-secondary: var(--secondary, #d44000);
    --onboarding-secondary-light: #f07845;
    --onboarding-secondary-dark: #c94820;

    /* Status Colors */
    --onboarding-accent: var(--success, #10b981);
    --onboarding-warning: var(--warning, #f59e0b);
    --onboarding-danger: var(--danger, #ef4444);

    /* Neutral Colors - inherit from master */
    --onboarding-gray-50: var(--gray-50, #f9fafb);
    --onboarding-gray-100: var(--gray-100, #f3f4f6);
    --onboarding-gray-200: var(--gray-200, #e5e7eb);
    --onboarding-gray-300: var(--gray-300, #d1d5db);
    --onboarding-gray-400: var(--gray-400, #9ca3af);
    --onboarding-gray-500: var(--gray-500, #6b7280);
    --onboarding-gray-600: var(--gray-600, #4b5563);
    --onboarding-gray-700: var(--gray-700, #374151);
    --onboarding-gray-800: var(--gray-800, #1f2937);
    --onboarding-gray-900: var(--gray-900, #111827);

    /* Spacing */
    --onboarding-spacing-xs: 0.25rem;
    --onboarding-spacing-sm: 0.5rem;
    --onboarding-spacing-md: 1rem;
    --onboarding-spacing-lg: 1.5rem;
    --onboarding-spacing-xl: 2rem;
    --onboarding-spacing-2xl: 3rem;

    /* Border Radius */
    --onboarding-radius-sm: 0.5rem;
    --onboarding-radius-md: 0.75rem;
    --onboarding-radius-lg: 1rem;
    --onboarding-radius-xl: 1.5rem;
    --onboarding-radius-2xl: 2rem;
    --onboarding-radius-full: 9999px;

    /* Shadows */
    --onboarding-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
    --onboarding-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
    --onboarding-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
    --onboarding-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1);
    --onboarding-shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);
    --onboarding-shadow-glow: 0 0 40px 5px rgba(232, 93, 47, 0.3);

    /* Transitions */
    --onboarding-transition-fast: 150ms cubic-bezier(0.4,0,0.2,1);
    --onboarding-transition-base: 300ms cubic-bezier(0.4,0,0.2,1);
    --onboarding-transition-slow: 500ms cubic-bezier(0.4,0,0.2,1);

    /* Z-Index Scale */
    --onboarding-z-overlay: 9998;
    --onboarding-z-spotlight: 9999;
    --onboarding-z-tooltip: 10000;
    --onboarding-z-controls: 10001;
}

/* ===================
   BASE STYLES
   =================== */

.onboarding-container {
    font-family: 'Cairo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

[x-cloak] {
    display: none !important;
}

[dir="rtl"] .onboarding-container {
    direction: rtl;
    text-align: right;
}

.onboarding-tooltip,
.onboarding-spotlight,
.onboarding-overlay {
    will-change: transform, opacity;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}