/* ============================================
   ECP360 AI-Powered Ecosystem — Design Tokens
   ============================================ */

:root {
    /* Background */
    --bg-primary: #000000;
    --bg-secondary: #0a0a0f;
    --bg-tertiary: #111118;
    --bg-card: rgba(255, 255, 255, 0.02);
    --bg-card-hover: rgba(255, 255, 255, 0.04);

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.6);
    --text-muted: rgba(255, 255, 255, 0.4);

    /* Accents — Purple/Pink AI theme */
    --accent-primary: #a855f7;
    --accent-secondary: #6366f1;
    --accent-tertiary: #ec4899;
    --accent-blue: #3b82f6;
    --accent-cyan: #06b6d4;

    /* Gradients */
    --gradient-brand: linear-gradient(135deg, #a855f7 0%, #6366f1 50%, #3b82f6 100%);
    --gradient-text: linear-gradient(135deg, #e0e7ff 0%, #a855f7 50%, #ec4899 100%);
    --gradient-glow: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.15), transparent 70%);

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-accent: rgba(168, 85, 247, 0.3);

    /* Typography */
    --font-primary: 'Inter', sans-serif;
    --font-display: 'Outfit', sans-serif;
    --font-mono: 'Space Grotesk', sans-serif;

    /* Spacing */
    --section-padding: 6rem 4rem;
    --section-padding-mobile: 4rem 1.5rem;
    --container-max: 1400px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 0.3s var(--ease-out);
    --transition-normal: 0.4s var(--ease-out);
}