/* ================================================================
   DEVLOPAK THEME -- Master Color System & CSS Variables
   GenZ style: red / purple / blue dynamic gradients
   ================================================================ */

:root {
    /* --- BASE SURFACES --- */
    --dk-bg-deep: #0f0f14;
    --dk-bg: #16161e;
    --dk-bg-card: #1e1e2a;
    --dk-bg-card-hover: #262636;
    --dk-bg-card-alt: #1a1a26;
    --dk-bg-input: #1c1c28;
    --dk-bg-glass: rgba(30, 30, 42, 0.55);
    --dk-bg-glass-heavy: rgba(22, 22, 30, 0.85);

    /* --- BRAND GRADIENT TRIO --- */
    --dk-red: #ff2d55;
    --dk-red-soft: #ff4d6d;
    --dk-red-glow: rgba(255, 45, 85, 0.3);
    --dk-blue: #3b82f6;
    --dk-blue-soft: #60a5fa;
    --dk-blue-glow: rgba(59, 130, 246, 0.3);
    --dk-purple: #8b5cf6;
    --dk-purple-soft: #a78bfa;
    --dk-purple-glow: rgba(139, 92, 246, 0.3);

    /* --- GRADIENTS --- */
    --dk-grad-energy: linear-gradient(135deg, #ff2d55, #8b5cf6);
    --dk-grad-cool: linear-gradient(135deg, #3b82f6, #8b5cf6);
    --dk-grad-fire: linear-gradient(135deg, #ff2d55, #ff6b35);
    --dk-grad-full: linear-gradient(135deg, #ff2d55 0%, #8b5cf6 50%, #3b82f6 100%);
    --dk-grad-text: linear-gradient(90deg, #ff2d55 0%, #a78bfa 40%, #3b82f6 80%, #ff2d55 100%);
    --dk-grad-border: linear-gradient(135deg, rgba(255,45,85,0.4), rgba(139,92,246,0.4), rgba(59,130,246,0.4));
    --dk-grad-shimmer: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%);

    /* --- TEXT --- */
    --dk-text: #f0f0f8;
    --dk-text-muted: #9ca3af;
    --dk-text-dim: #7a7a94;
    --dk-text-accent: #a78bfa;

    /* --- BORDERS --- */
    --dk-border: rgba(139, 92, 246, 0.12);
    --dk-border-hover: rgba(139, 92, 246, 0.3);
    --dk-border-active: rgba(255, 45, 85, 0.4);

    /* --- SEMANTIC --- */
    --dk-success: #22c55e;
    --dk-warning: #f59e0b;
    --dk-danger: #ef4444;
    --dk-info: #3b82f6;

    /* --- SHADOWS --- */
    --dk-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);
    --dk-shadow-hover: 0 8px 32px rgba(139, 92, 246, 0.18);
    --dk-shadow-glow: 0 0 30px rgba(139, 92, 246, 0.22);
    --dk-shadow-red: 0 0 30px rgba(255, 45, 85, 0.22);
    --dk-shadow-blue: 0 0 30px rgba(59, 130, 246, 0.22);

    /* --- RADIUS --- */
    --dk-radius-sm: 8px;
    --dk-radius: 12px;
    --dk-radius-lg: 16px;
    --dk-radius-xl: 24px;
    --dk-radius-full: 9999px;

    /* --- TRANSITIONS --- */
    --dk-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dk-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dk-duration: 0.25s;
    --dk-duration-slow: 0.5s;
}