/* ============================================================
   CSS CUSTOM PROPERTIES — SMM SPOT  |  Theme: Indigo Cosmos
   ============================================================ */

:root {
    /* ── Background ── */
    --bg-primary:    #08091a;
    --bg-secondary:  #0f1629;
    --bg-tertiary:   #0d1525;
    --card-bg:       rgba(255, 255, 255, 0.04);
    --card-bg-hover: rgba(255, 255, 255, 0.07);

    /* ── Brand ── */
    --primary:         #4f46e5;
    --primary-light:   #6366f1;
    --primary-dark:    #3730a3;
    --secondary:       #0ea5e9;
    --secondary-light: #38bdf8;
    --accent:          #818cf8;
    --pink:            #c084fc;

    /* ── Gradients ── */
    --gradient:         linear-gradient(135deg, #4f46e5 0%, #0ea5e9 100%);
    --gradient-hover:   linear-gradient(135deg, #6366f1 0%, #38bdf8 100%);
    --gradient-reverse: linear-gradient(135deg, #0ea5e9 0%, #4f46e5 100%);
    --gradient-subtle:  linear-gradient(135deg, rgba(79,70,229,0.10) 0%, rgba(14,165,233,0.10) 100%);
    --gradient-hero:    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(79,70,229,0.28) 0%, transparent 65%),
                        radial-gradient(ellipse 70% 50% at 80% 60%, rgba(14,165,233,0.18) 0%, transparent 65%);
    --gradient-mesh:    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    --gradient-border:  linear-gradient(135deg, rgba(79,70,229,0.55), rgba(14,165,233,0.55));

    /* ── Text ── */
    --text:           #f8fafc;
    --text-secondary: #e2e8f0;
    --text-muted:     #94a3b8;
    --text-faint:     #475569;

    /* ── Typography ── */
    --font-heading: 'Poppins', 'Segoe UI', Arial, sans-serif;
    --font-body:    'Inter', 'Segoe UI', Arial, sans-serif;

    /* ── Font Scale ── */
    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-lg:   1.125rem;
    --fs-xl:   1.25rem;
    --fs-2xl:  1.5rem;
    --fs-3xl:  1.875rem;
    --fs-4xl:  2.25rem;
    --fs-5xl:  3rem;
    --fs-6xl:  3.75rem;
    --fs-7xl:  4.5rem;
    --fs-8xl:  5.5rem;

    /* ── Layout ── */
    --section-padding:  60px 0;
    --container-max:    1280px;
    --container-pad:    0 20px;
    --navbar-height:    76px;

    /* ── Border Radius ── */
    --r-xs:   4px;
    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   16px;
    --r-xl:   20px;
    --r-2xl:  28px;
    --r-3xl:  40px;
    --r-full: 9999px;

    /* ── Shadows ── */
    --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg:  0 20px 60px rgba(0, 0, 0, 0.55);
    --shadow-glow-primary:   0 0 40px rgba(79, 70, 229, 0.38);
    --shadow-glow-secondary: 0 0 40px rgba(14, 165, 233, 0.30);
    --shadow-glow-sm:        0 0 20px rgba(79, 70, 229, 0.30);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.5),
                   inset 0 1px 0 rgba(255, 255, 255, 0.05);

    /* ── Borders ── */
    --border:           1px solid rgba(255, 255, 255, 0.07);
    --border-subtle:    1px solid rgba(255, 255, 255, 0.04);
    --border-primary:   1px solid rgba(79, 70, 229, 0.35);
    --border-secondary: 1px solid rgba(14, 165, 233, 0.30);
    --border-glow:      1px solid rgba(129, 140, 248, 0.45);

    /* ── Transitions ── */
    --t-fast:   all 0.15s ease;
    --t:        all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --t-slow:   all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    --t-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-spring: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ── Z-index ── */
    --z-below:   -1;
    --z-base:     1;
    --z-above:   10;
    --z-float:   50;
    --z-navbar: 900;
    --z-overlay: 999;
    --z-modal:  1000;
}