/**
 * SEO Marketplace Pro - Design Tokens
 *
 * SINGLE SOURCE OF TRUTH for all design variables.
 * This file MUST be loaded first on all plugin pages.
 *
 * Updated: January 2025 - Unified with Bold Blue theme
 * Primary Color: #0066FF (Trust Blue)
 * Font: Plus Jakarta Sans
 */

:root {
    /* ========================================
       PRIMARY BRAND COLORS - TRUST BLUE
       ======================================== */

    /* Main brand color - Trust Blue for professional SEO marketplace */
    --seomp-primary: #0066FF;
    --seomp-primary-hover: #004ECC;
    --seomp-primary-light: #E5F0FF;
    --seomp-primary-dark: #004ECC;

    /* Secondary accent */
    --seomp-secondary: #3B82F6;
    --seomp-secondary-hover: #2563EB;
    --seomp-secondary-light: #EFF6FF;

    /* ========================================
       SEMANTIC COLORS
       ======================================== */

    /* Success - for completed orders, approved gigs, positive actions */
    --seomp-success: #10B981;
    --seomp-success-hover: #059669;
    --seomp-success-light: #D1FAE5;
    --seomp-success-dark: #047857;

    /* Warning - for pending actions, late orders */
    --seomp-warning: #F59E0B;
    --seomp-warning-hover: #D97706;
    --seomp-warning-light: #FEF3C7;
    --seomp-warning-dark: #B45309;

    /* Error/Danger - for cancelled, rejected, errors */
    --seomp-error: #EF4444;
    --seomp-error-hover: #DC2626;
    --seomp-error-light: #FEE2E2;
    --seomp-error-dark: #B91C1C;

    /* Info - for informational messages */
    --seomp-info: #3B82F6;
    --seomp-info-hover: #2563EB;
    --seomp-info-light: #DBEAFE;
    --seomp-info-dark: #1D4ED8;

    /* ========================================
       NEUTRAL COLORS (Gray Scale)
       ======================================== */

    --seomp-gray-50: #F9FAFB;
    --seomp-gray-100: #F3F4F6;
    --seomp-gray-200: #E5E7EB;
    --seomp-gray-300: #D1D5DB;
    --seomp-gray-400: #9CA3AF;
    --seomp-gray-500: #6B7280;
    --seomp-gray-600: #4B5563;
    --seomp-gray-700: #374151;
    --seomp-gray-800: #1F2937;
    --seomp-gray-900: #111827;

    /* Semantic neutral aliases */
    --seomp-text-primary: var(--seomp-gray-900);
    --seomp-text-secondary: var(--seomp-gray-600);
    --seomp-text-muted: var(--seomp-gray-500);
    --seomp-text-light: var(--seomp-gray-400);

    --seomp-bg-primary: #FFFFFF;
    --seomp-bg-secondary: var(--seomp-gray-50);
    --seomp-bg-tertiary: var(--seomp-gray-100);

    --seomp-border-color: var(--seomp-gray-200);
    --seomp-border-color-dark: var(--seomp-gray-300);

    /* ========================================
       SPECIAL PURPOSE COLORS
       ======================================== */

    /* Rating stars */
    --seomp-rating-star: #FFB33E;
    --seomp-rating-star-empty: var(--seomp-gray-300);

    /* Online/availability indicator */
    --seomp-online: #10B981;
    --seomp-offline: var(--seomp-gray-400);

    /* Seller level colors */
    --seomp-level-new: var(--seomp-gray-500);
    --seomp-level-1: #3B82F6;
    --seomp-level-2: #8B5CF6;
    --seomp-level-top: #F59E0B;

    /* ========================================
       TYPOGRAPHY
       ======================================== */

    /* Font families - Plus Jakarta Sans as primary */
    --seomp-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --seomp-font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --seomp-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Font sizes */
    --seomp-text-xs: 0.75rem;     /* 12px */
    --seomp-text-sm: 0.875rem;    /* 14px */
    --seomp-text-base: 1rem;      /* 16px */
    --seomp-text-lg: 1.125rem;    /* 18px */
    --seomp-text-xl: 1.25rem;     /* 20px */
    --seomp-text-2xl: 1.5rem;     /* 24px */
    --seomp-text-3xl: 1.875rem;   /* 30px */
    --seomp-text-4xl: 2.25rem;    /* 36px */

    /* Font weights */
    --seomp-font-normal: 400;
    --seomp-font-medium: 500;
    --seomp-font-semibold: 600;
    --seomp-font-bold: 700;

    /* Line heights */
    --seomp-leading-tight: 1.25;
    --seomp-leading-normal: 1.5;
    --seomp-leading-relaxed: 1.625;

    /* ========================================
       SPACING
       ======================================== */

    --seomp-space-0: 0;
    --seomp-space-1: 0.25rem;   /* 4px */
    --seomp-space-2: 0.5rem;    /* 8px */
    --seomp-space-3: 0.75rem;   /* 12px */
    --seomp-space-4: 1rem;      /* 16px */
    --seomp-space-5: 1.25rem;   /* 20px */
    --seomp-space-6: 1.5rem;    /* 24px */
    --seomp-space-8: 2rem;      /* 32px */
    --seomp-space-10: 2.5rem;   /* 40px */
    --seomp-space-12: 3rem;     /* 48px */
    --seomp-space-16: 4rem;     /* 64px */

    /* ========================================
       BORDER RADIUS
       ======================================== */

    --seomp-radius-none: 0;
    --seomp-radius-sm: 0.125rem;   /* 2px */
    --seomp-radius-md: 0.25rem;    /* 4px */
    --seomp-radius-lg: 0.5rem;     /* 8px */
    --seomp-radius-xl: 0.75rem;    /* 12px */
    --seomp-radius-2xl: 1rem;      /* 16px */
    --seomp-radius-full: 9999px;

    /* ========================================
       SHADOWS
       ======================================== */

    --seomp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --seomp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --seomp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --seomp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Card hover shadow */
    --seomp-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
    --seomp-shadow-card-hover: 0 8px 16px rgba(0, 0, 0, 0.12);

    /* ========================================
       TRANSITIONS
       ======================================== */

    --seomp-transition-fast: 150ms ease;
    --seomp-transition-normal: 200ms ease;
    --seomp-transition-slow: 300ms ease;

    /* ========================================
       Z-INDEX SCALE
       Updated to prevent conflicts with sitewide header
       ======================================== */

    --seomp-z-dropdown: 100;
    --seomp-z-sticky: 200;
    --seomp-z-sidebar: 500;
    --seomp-z-fixed: 1000;
    --seomp-z-modal-backdrop: 9000;
    --seomp-z-modal: 9100;
    --seomp-z-popover: 9200;
    --seomp-z-header: 99999;
    --seomp-z-tooltip: 100000;

    /* ========================================
       LAYOUT
       ======================================== */

    --seomp-container-sm: 640px;
    --seomp-container-md: 768px;
    --seomp-container-lg: 1024px;
    --seomp-container-xl: 1280px;
    --seomp-container-2xl: 1400px;

    /* Sidebar widths */
    --seomp-sidebar-width: 280px;
    --seomp-sidebar-width-lg: 320px;

    /* ========================================
       COMPONENT SPECIFIC
       ======================================== */

    /* Gig cards */
    --seomp-gig-card-image-ratio: 16 / 9;
    --seomp-gig-card-padding: var(--seomp-space-4);
    --seomp-gig-card-radius: var(--seomp-radius-lg);

    /* Buttons */
    --seomp-btn-padding-x: var(--seomp-space-4);
    --seomp-btn-padding-y: var(--seomp-space-3);
    --seomp-btn-radius: var(--seomp-radius-md);
    --seomp-btn-font-weight: var(--seomp-font-semibold);

    /* Form inputs */
    --seomp-input-padding-x: var(--seomp-space-3);
    --seomp-input-padding-y: var(--seomp-space-2);
    --seomp-input-radius: var(--seomp-radius-md);
    --seomp-input-border-width: 1px;

    /* Status pill badges */
    --seomp-pill-padding-x: var(--seomp-space-3);
    --seomp-pill-padding-y: var(--seomp-space-1);
    --seomp-pill-radius: var(--seomp-radius-full);
}

/* ========================================
   LEGACY VARIABLE ALIASES
   For backward compatibility with existing CSS
   ======================================== */

:root {
    /* frontend.css compatibility */
    --primary-blue: var(--seomp-primary);
    --dark-blue: var(--seomp-primary-dark);
    --light-blue: var(--seomp-primary-light);
    --secondary: var(--seomp-error);
    --success: var(--seomp-success);
    --warning: var(--seomp-warning);
    --danger: var(--seomp-error);
    --dark: var(--seomp-text-primary);
    --gray: var(--seomp-text-secondary);
    --light-gray: var(--seomp-gray-100);
    --border: var(--seomp-border-color);
    --shadow: var(--seomp-shadow-card);
    --shadow-hover: var(--seomp-shadow-card-hover);

    /* marketplace-fiverr.css compatibility */
    --gray-50: var(--seomp-gray-50);
    --gray-100: var(--seomp-gray-100);
    --gray-200: var(--seomp-gray-200);
    --gray-300: var(--seomp-gray-300);
    --gray-400: var(--seomp-gray-400);
    --gray-500: var(--seomp-gray-500);
    --gray-600: var(--seomp-gray-600);
    --gray-700: var(--seomp-gray-700);
    --gray-800: var(--seomp-gray-800);
    --gray-900: var(--seomp-gray-900);
    --rating-star: var(--seomp-rating-star);
    --error: var(--seomp-error);
    --font-family: var(--seomp-font-family);
    --spacing-xs: var(--seomp-space-1);
    --spacing-sm: var(--seomp-space-2);
    --spacing-md: var(--seomp-space-4);
    --spacing-lg: var(--seomp-space-6);
    --spacing-xl: var(--seomp-space-8);

    /* Bold Blue theme compatibility */
    --brand-primary: var(--seomp-primary);
    --brand-primary-hover: var(--seomp-primary-hover);
    --brand-primary-light: var(--seomp-primary-light);
    --bg-page: var(--seomp-bg-primary);
    --bg-surface: var(--seomp-bg-primary);
    --bg-alt: var(--seomp-bg-secondary);
    --bg-light: var(--seomp-bg-tertiary);
    --text-heading: var(--seomp-text-primary);
    --text-body: var(--seomp-text-secondary);
    --text-muted: var(--seomp-text-muted);
    --text-light: var(--seomp-text-light);
    --text-on-brand: #FFFFFF;
    --border-subtle: var(--seomp-border-color);
    --border-focus: var(--seomp-primary);
    --star-yellow: var(--seomp-rating-star);

    /* Bold Blue spacing compatibility */
    --space-xs: var(--seomp-space-1);
    --space-sm: var(--seomp-space-2);
    --space-md: var(--seomp-space-4);
    --space-lg: var(--seomp-space-6);
    --space-xl: var(--seomp-space-8);
    --space-2xl: var(--seomp-space-12);
    --space-3xl: var(--seomp-space-16);

    /* Bold Blue radius compatibility */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 100px;

    /* Bold Blue shadows */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -1px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 10px 15px -3px rgba(15, 23, 42, 0.05), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
    --shadow-float: 0 20px 25px -5px rgba(15, 23, 42, 0.05), 0 10px 10px -5px rgba(15, 23, 42, 0.02);
    --shadow-brand: 0 10px 25px -5px rgba(0, 102, 255, 0.25);

    /* Layout */
    --sidebar-width: var(--seomp-sidebar-width);
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */

@media (prefers-color-scheme: dark) {
    :root.seomp-dark-mode,
    body.seomp-dark-mode {
        --seomp-text-primary: var(--seomp-gray-100);
        --seomp-text-secondary: var(--seomp-gray-300);
        --seomp-text-muted: var(--seomp-gray-400);

        --seomp-bg-primary: var(--seomp-gray-900);
        --seomp-bg-secondary: var(--seomp-gray-800);
        --seomp-bg-tertiary: var(--seomp-gray-700);

        --seomp-border-color: var(--seomp-gray-700);
        --seomp-border-color-dark: var(--seomp-gray-600);

        --seomp-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
        --seomp-shadow-card-hover: 0 8px 16px rgba(0, 0, 0, 0.4);
    }
}