/* ===== INNOVATIVE PLACEMENTS - CSS VARIABLES ===== */
/* Professional Business Website Design System */

:root {
    /* ========================================
       BRAND COLORS (from IP Logo - used sparingly)
       ======================================== */
    --ip-pink: #ff6b9d;
    --ip-pink-light: #ff8fb3;
    --ip-pink-dark: #e5527f;

    --ip-purple: #c44dff;
    --ip-purple-light: #d47fff;
    --ip-purple-dark: #a033e0;

    --ip-teal: #00d4ff;
    --ip-teal-light: #4de4ff;
    --ip-teal-dark: #00b8e0;

    /* Status Colors */
    --ip-green: #22c55e;
    --ip-orange: #f97316;
    --ip-red: #ef4444;

    /* ========================================
       BACKGROUND COLORS
       ======================================== */
    --ip-bg-primary: #0a0a0f;
    --ip-bg-secondary: #0d0d14;
    --ip-bg-card: rgba(255, 255, 255, 0.03);
    --ip-bg-card-hover: rgba(255, 255, 255, 0.06);

    /* ========================================
       TEXT COLORS
       ======================================== */
    --ip-text-primary: #ffffff;
    --ip-text-secondary: #e0e0e0;
    --ip-text-muted: #888888;
    --ip-text-dim: #666666;

    /* ========================================
       BORDER COLORS
       ======================================== */
    --ip-border: rgba(255, 255, 255, 0.08);
    --ip-border-subtle: rgba(255, 255, 255, 0.04);
    --ip-border-hover: rgba(255, 255, 255, 0.15);
    --ip-border-strong: rgba(255, 255, 255, 0.2);
    --ip-border-accent: rgba(196, 77, 255, 0.4);

    /* ========================================
       GRADIENTS
       ======================================== */
    --ip-gradient-brand: linear-gradient(135deg, #ff6b9d 0%, #c44dff 50%, #00d4ff 100%);
    --ip-gradient-text: linear-gradient(135deg, #ff6b9d 0%, #c44dff 100%);

    /* ========================================
       SHADOWS & GLOWS
       ======================================== */
    --ip-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --ip-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --ip-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --ip-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);

    --ip-glow-pink: 0 0 30px rgba(255, 107, 157, 0.3);
    --ip-glow-purple: 0 0 30px rgba(196, 77, 255, 0.3);
    --ip-glow-teal: 0 0 30px rgba(0, 212, 255, 0.3);

    /* ========================================
       TYPOGRAPHY
       ======================================== */
    --ip-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ip-font-display: 'Nunito', 'Inter', sans-serif;

    /* Font Sizes */
    --ip-text-xs: 0.75rem;
    --ip-text-sm: 0.875rem;
    --ip-text-base: 1rem;
    --ip-text-lg: 1.125rem;
    --ip-text-xl: 1.25rem;
    --ip-text-2xl: 1.5rem;
    --ip-text-3xl: 1.875rem;
    --ip-text-4xl: 2.25rem;
    --ip-text-5xl: 3rem;
    --ip-text-6xl: 3.75rem;

    /* Font Weights */
    --ip-font-normal: 400;
    --ip-font-medium: 500;
    --ip-font-semibold: 600;
    --ip-font-bold: 700;
    --ip-font-extrabold: 800;

    /* Line Heights */
    --ip-leading-tight: 1.25;
    --ip-leading-snug: 1.375;
    --ip-leading-normal: 1.5;
    --ip-leading-relaxed: 1.625;

    /* ========================================
       SPACING
       ======================================== */
    --ip-space-1: 0.25rem;
    --ip-space-2: 0.5rem;
    --ip-space-3: 0.75rem;
    --ip-space-4: 1rem;
    --ip-space-5: 1.25rem;
    --ip-space-6: 1.5rem;
    --ip-space-8: 2rem;
    --ip-space-10: 2.5rem;
    --ip-space-12: 3rem;
    --ip-space-16: 4rem;
    --ip-space-20: 5rem;
    --ip-space-24: 6rem;

    /* ========================================
       BORDER RADIUS
       ======================================== */
    --ip-radius-sm: 0.25rem;
    --ip-radius-md: 0.5rem;
    --ip-radius-lg: 0.75rem;
    --ip-radius-xl: 1rem;
    --ip-radius-2xl: 1.5rem;
    --ip-radius-full: 9999px;

    /* ========================================
       TRANSITIONS
       ======================================== */
    --ip-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --ip-transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --ip-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --ip-transition-slower: 800ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ========================================
       Z-INDEX
       ======================================== */
    --ip-z-dropdown: 100;
    --ip-z-sticky: 200;
    --ip-z-fixed: 300;
    --ip-z-modal: 500;
    --ip-z-tooltip: 700;

    /* ========================================
       LAYOUT
       ======================================== */
    --ip-container-xl: 1200px;
    --ip-header-height: 80px;
}